3

我试图从 HTML 文本区域中获取文本，并在按下“提交”按钮时调用 create() 方法。该方法试图使用来自文本区域的消息，并将其发布到它自己的带有类的 p 标签，并在它自己的 p 标签和它自己的类中发布一个日期戳。

这些都将在 div 的“评论”中。我得到的错误（使用 Chrome 中的开发人员工具）是

未捕获的类型错误：无法调用 null 的方法“appendChild”。

这是针对“cmt.appendChild(divTag);”的。我对 Javascript 很陌生，这只是我提高技能的练习。非常感谢所有帮助！

var cmt = document.getElementById('comments');

function create() {

    var username = 'User',
        message = document.getElementById("textBox").value,
        divTag = document.createElement('div'),
        p1 = document.createElement('p'),
        p2 = document.createElement('p');

    divTag.className = 'comment';

    p1.className = 'date';
    p1.innerHTML = new Date();
    divTag.appendChild(p1);

    p2.className = 'message';
    p2.innerHTML = username + ': ' +message;
    divTag.appendChild(p2);

    cmt.appendChild(divTag);
}
4

3 回答 3

6

您收到的错误表明您的页面上没有 ID 为“comments”的元素。当没有找到具有此类 ID 的元素时document.getElementById将返回，因此将作为.nullcmd.appendChild(divTag)null.appendChild(divTag)

如果您确定该元素存在，则您可能正在执行您的 JavaScript，该 JavaScript在浏览器创建该元素之前cmt分配了该变量。为防止这种情况发生，标准做法是将包含外部 JavaScript的标记放在结束标记之前。<script></body>

如果由于某种原因无法移动脚本标记，请尝试运行使用$(document).ready()(jQuery)或等效项分配变量的代码。

于 2013-02-18T22:27:54.107 回答
1

实际上，他的代码很好。只是 JavaScript 在 HTML 之前运行。一个简单的解决方法是将所有代码嵌套在具有任何名称的函数中。然后在 HTML 加载完成后使用 window.onload 运行该函数。所以基本上：

window.onload = function any_name()
{
//code to be executed
}

如果您不想移动脚本标记，这尤其有用。我通常喜欢将标签留在原处。

于 2014-02-27T21:45:49.147 回答
1

如果存在所需的元素，您的代码就可以工作。正如你在这个 Fiddle中看到的那样。

如果 HTML 类似于：

<div id="comments">
    <input id="textBox" type="textBox" value="Hello" />
</div>

我的猜测是其中一个标识符可能拼写错误，或者您期望的元素不存在。

但是，如果您在外部文件中运行脚本，它可能会尝试在文档完全加载之前执行，因此您的脚本指的是 DOM 中尚未准备好的元素。

在 jQuery 中，你会环绕一个$(document).ready(function(){// your code here..})。
在这篇 SO 帖子中有一些关于如何仅在 JavaScript 中执行此操作的详细信息：Documen Ready 等价物没有 jQuery。

于 2013-02-18T22:30:52.377 回答