Question

我试图从HTML文本区域抓取文本，并在按下“提交”按钮时调用create（）方法。该方法尝试使用来自文本区域的消息，并使用类将其发布到其自己的p标记，并在其自己的p标记及其自己的类中发布日期戳。

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

未捕获的TypeError：无法调用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);
}

Answer 1

您收到的错误表明您的网页上没有ID为“评论”的元素。如果找不到具有此类ID的元素，document.getElementById将返回null，因此cmd.appendChild(divTag)将以null.appendChild(divTag)执行。

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

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

Answer 2

如果存在必需的元素，您的代码将起作用。正如您在this 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 equivalent without jQuery。

Answer 3

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

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

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

如何修复“Uncaught TypeError：无法调用方法'appendChild'的null”

3 个答案: