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

侯城全

我正在处理我的 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>

你能帮我解决这个问题吗?

先感谢您。

马蒙

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

  1. 您可以在脚本标签中指定defer属性。
  2. 您可以使用DOMContentLoaded事件包装代码,该事件在初始 HTML 文档完全加载和解析时触发。
  3. 您可以将脚本放在body.

属性 延迟

此布尔属性设置为向浏览器指示脚本将在解析文档之后执行,但在触发 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何解决此“无法读取null的属性'appendChild'”错误?

如何解决 React 问题(TypeError:无法读取 null 的属性“showModel”)

如何解决:“ TypeError:无法读取属性'addEventListener'为null” ...?//

未捕获的TypeError:无法读取null的属性'appendChild'

Backbone网站上的Disqus上的“无法读取null的属性'appendChild'”

TypeError:无法在ReactJS中读取null的属性'appendChild'

无法读取For-Loop中null的'appendchild'属性

我该如何解决:“未捕获的 TypeError:无法读取 null 的属性(正在读取 'addEventListener')”?

我收到错误,如“无法读取未定义的属性‘get’”。如何解决这个问题?

Angular 2:如何解决无法读取属性“ lastIndexOf”的问题?

如何解决Xcode中无法读取“ /Users/path/myapp/Images.xcassets”的文件属性的问题?

类型错误:无法读取未定义的属性“then”---我该如何解决这个问题?

类型错误:无法读取未定义的属性“电子邮件”,如何解决此问题

如何解决“未捕获的TypeError:无法读取'checked'为null的属性”

如何解决,错误:无法使用puppeteer读取null的'contentFrame'属性

如何解决以下错误:未捕获的TypeError:无法读取null的属性'classList'

Firebase身份验证:如何解决“ TypeError:无法读取null的属性'getIdToken'”错误

如何解决“未捕获的TypeError:无法读取null的属性'click'”

如何解决未捕获的TypeError:无法读取tinymce.4.2.7.min.js的null属性“ body”?

npm启动后如何解决“无法读取null的属性'map'”?

Discord.js:无法读取 Null 的属性“名称” - 我该如何解决?

类型错误:无法读取 null 的属性“长度”,我该如何解决?

我如何解决 angular 12 中的“TypeError:无法读取 null 的属性“值”错误?

如何解决未捕获的类型错误:无法读取 null 的属性 'getDisplayList'

“无法读取innerhtml null的属性”问题

如何解决错误 =>“无法设置 null 属性(设置 'innerHTML')”?

如何解决TypeError:无法读取null的属性“ scrollTo”(由于本机基本选项卡对本机做出反应而发生)?

jQuery问题,未捕获的TypeError:无法读取null的属性“长度”

任务-濒危物种。如何解决这个问题呢?为什么我无法读取未定义的属性“ length”。问题的描述如下