无法将属性“innerHTML”设置为 null

javascript innerhtml onload

2022-08-30 04:22:37

为什么我收到错误或未捕获的类型错误：无法将属性“innerHTML”设置为null？我以为我理解了innerHTML，并且之前已经让它工作了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>

答案 1

您必须将 div 放在脚本之前，以便在加载脚本时它存在。hello

答案 2

让我们首先尝试了解它为什么首先发生的根本原因。

为什么我收到错误或未捕获的类型错误：无法将属性“innerHTML”设置为null？

浏览器始终从上到下加载整个 HTML DOM。任何写在标签内部的JavaScript代码（存在于HTML文件的一部分中）都会被浏览器渲染引擎执行，甚至在加载整个DOM（body标签中存在的各种HTML元素标签）之前。标记中存在的脚本甚至在 DOM 中实际呈现之前，就试图访问具有 id 的元素。很明显，JavaScript未能看到该元素，因此您最终看到空引用错误。scriptheadheadhello

你怎么能让它像以前一样工作？

您希望在用户首次登陆您的页面后立即在页面上显示 hi 消息。因此，当您完全确定DOM已完全加载并且id元素可访问/可用时，您需要将代码挂接起来。它可以通过两种方式实现：hello

对脚本重新排序：这样，只有在加载了包含 id 元素的 DOM 之后，才会触发脚本。您可以通过简单地将脚本标签移动到所有DOM元素之后来实现它，即在标签结束的底部。由于渲染是从上到下进行的，因此您的脚本最终会执行，并且您不会遇到任何错误。hellobody

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
    </head>
    
    <body>
        <div id="hello"></div>
        <script type ="text/javascript">
            what();
            function what(){
                document.getElementById('hello').innerHTML = 'hi';
            };
        </script>
    </body>
</html>

使用事件挂接：浏览器的呈现引擎提供了一个基于事件的挂接，通过事件，它提示浏览器已经完成了DOM的加载。因此，当此事件被触发时，您可以放心，您的ID已经加载到DOM中的元素以及此后触发的任何尝试访问此元素的JavaScript都不会失败。所以你做了一些类似于下面的代码片段。请注意，在这种情况下，即使您的脚本位于 HTML 文档顶部 head 标记内，它也可以正常工作。window.onloadhello
```
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type ="text/javascript">
            window.onload = function() {
                what();
                function what(){
                    document.getElementById('hello').innerHTML = 'hi';
                };
            }
        </script>
    </head> 
    <body>
        <div id="hello"></div>
    </body>
</html>
```