如何解决“遗漏的类型错误:无法调用空的‘的appendChild’”(How to fix “Unc

2019-07-20 03:10发布

我试图在按下“提交”按钮,抢从HTML文本区域的文本,并调用Create()方法。 该方法尝试使用该消息从文本区,并张贴与阶级自身的p标签,并在其自己的p标签,以及它自己的类发布日期戳。

这些都将是在div“评论”。 我得到(使用Chrome开发者工具)的错误,是

遗漏的类型错误:无法调用空的方法“的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“意见”没有元素。 document.getElementById将返回null当与这样的ID没有元素被发现,并且因此cmd.appendChild(divTag)将作为被执行null.appendChild(divTag)

如果您确信该元素存在,你可以是执行你的JavaScript来分配cmt 是由浏览器创建的元素之前的变量。 为了防止这种情况,标准的做法是将<script>标签,其中包括你的外部JavaScript 只是在收盘前</body>标签

如果你不能将你的脚本标签出于某种原因,尝试运行,该变量与分配代码$(document).ready() (jQuery的) 或同等学历 。



Answer 2:

如果需要的元素存在,你的代码工作。 正如你可以看到在这个小提琴

工作,如果HTML类似:

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

我的猜测是,标识之一,因为你希望它不存在可能拼错或元素。

但是,如果你是在一个外部文件运行脚本可能尝试执行完全加载文档之前,因此你的脚本是指元素在DOM 还没有准备好。

在jQuery中,你会包装一个$(document).ready(function(){// your code here..})左右。
对于如何在这个岗位SO做到这一点,在短短的JavaScript的一些细节: Documen准备相当于没有jQuery的



Answer 3:

其实,他的代码是好的。 它只是JavaScript的运行之前的HTML。 一个简单的解决方法是窝的所有代码的任何名称的函数内。 然后使用在window.onload的HTML被加载后运行的功能。 所以基本上是:

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

特别是如果你不想将你的脚本标签,这非常有用。 我一般喜欢离开这个标签在哪里。



文章来源: How to fix “Uncaught TypeError: Cannot call method 'appendChild' of null”