Question

我正在处理HTML和JavaScript项目。

运行代码时，出现错误

“无法读取null的属性'appendChild'”。

我试图解决此问题，但发现了here，但由于我是编程的新手，而且英语也不好，所以我听不懂。

这是我的代码：

<html>
<head>
    <script language="javascript">
        var wordlist = [ "a", "bb", "ccc", "dddd" ];
        var rannum = Math.floor(Math.random() * wordlist.length);
        var x = document.createElement("INPUT");

        for(i = 0; i < wordlist[rannum].length; i++) {
            x.setAttribute("type", "text");
            x.setAttribute("value", "");
            document.body.appendChild(x);
        }

    </script>
</head>
<body>
</body>
</html>

您能帮我解决问题吗？

谢谢。

Answer 1

您的脚本在DOM完全加载之前正在运行。有几种方法可以解决此问题：

您可以在脚本标签中指定defer属性。
您可以使用DOMContentLoaded事件包装代码，该事件将在初始HTML文档已完全加载和解析后触发。
您可以将脚本放在body的末尾。

属性 defer

此布尔属性设置为向浏览器指示脚本应在文档解析后但在触发DOMContentLoaded之前执行。

通过在循环外部创建输入，您可以在循环的每次迭代中引用相同的元素。您必须在循环内创建元素

<html>
<head>
    <script language="javascript" defer>
        var wordlist = [ "a", "bb", "ccc", "dddd" ];
        var rannum = Math.floor(Math.random() * wordlist.length);
        for(i = 0; i < wordlist[rannum].length; i++) {
            var x = document.createElement("INPUT");
            x.setAttribute("type", "text");
            x.setAttribute("value", "");
            document.body.appendChild(x);
        }

    </script>
</head>
<body>
</body>
</html>

如何解决“无法读取null的'appendChild'属性”的问题？

1 个答案: