Question

<!DOCTYPE html>
<html>

<head><style>
body, html{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
}
.drag_box{
    width: 40%;
    height: 90%;
    border: black 1px solid;
    background-color: lightgray;
    margin-top: 20px;
}
.drag_box h2{
    text-align: center;
}
.content{
    width: 80%;
    overflow: auto;
    border: solid 2px black;
    background-color: burlywood;
}
</style>

</head>
<body>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    if(document.getElementById(ev.target.id).id.includes("content")){
        return;
    }
    else{ 
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    }
}
</script>

我创建了这个函数以在php脚本中使用，因此它可以从我学校的网站上发布公告并自动在页面上创建内容。但是，运行时，代码根本不执行。当脚本标签放在'announcements'div中时，代码将执行并创建内容。

<script>
function addContent(id, headline, content){

    var announcementContent = document.createElement('div');

    announcementContent.setAttribute('class', 'content');
    announcementContent.setAttribute('id', 'content'+id);
    announcementContent.setAttribute('draggable', 'true');
    announcementContent.setAttribute('ondragstart', 'drag(event)');
    announcementContent.innerHTML = '<h3>'+ headline +'</h3><p>'+ content +'</p>';

    document.getElementById('announcements').appendChild(announcementContent);


}
    addContent('3','test','testest');
</script>

<div id="announcements" class="drag_box" style="float:left; margin-left: 9%;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h2>Announcements</h2>
</div>
<div id="delete_column" class="drag_box" style="float:right; margin-right: 9%;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h2>Trash Box</h2>
</div>
</body>
</html>

Answer 1

您已在announcements DIV添加到DOM之前调用该功能，因此document.getElementById('announcements')无法找到它。您应该在Javascript控制台中收到错误消息，指出您无法在.appendChild()上致电undefined。

在 DIV之后放置脚本。

<div id="announcements" class="drag_box" style="float:left; margin-left: 9%;" ondrop="drop(event)" ondragover="allowDrop(event)"> <h2>Announcements</h2> </div> <div id="delete_column" class="drag_box" style="float:right; margin-right: 9%;" ondrop="drop(event)" ondragover="allowDrop(event)"> <h2>Trash Box</h2> </div> <script> function addContent(id, headline, content){ var announcementContent = document.createElement('div'); announcementContent.setAttribute('class', 'content'); announcementContent.setAttribute('id', 'content'+id); announcementContent.setAttribute('draggable', 'true'); announcementContent.setAttribute('ondragstart', 'drag(event)'); announcementContent.innerHTML = '<h3>'+ headline +'</h3><p>'+ content +'</p>'; document.getElementById('announcements').appendChild(announcementContent); } addContent('3','test','testest'); </script>

或等到文档加载后再调用函数：

window.onload = function() { addContent('3', 'test', 'testest'); }

Answer 2

在html标记之后，在</body>标记之前移动脚本，否则当脚本运行时announcements元素不存在：

<div id="announcements" class="drag_box" style="float:left; margin-left: 9%;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h2>Announcements</h2>
</div>
<div id="delete_column" class="drag_box" style="float:right; margin-right: 9%;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h2>Trash Box</h2>
</div>

<script>
function addContent(id, headline, content){

    var announcementContent = document.createElement('div');

    announcementContent.setAttribute('class', 'content');
    announcementContent.setAttribute('id', 'content'+id);
    announcementContent.setAttribute('draggable', 'true');
    announcementContent.setAttribute('ondragstart', 'drag(event)');
    announcementContent.innerHTML = '<h3>'+ headline +'</h3><p>'+ content +'</p>';

    document.getElementById('announcements').appendChild(announcementContent);


}
    addContent('3','test','testest');
</script>

</body>
</html>

为什么我的JavaScript无法创建此元素？

2 个答案: