Question

为什么我会收到错误或未捕获的TypeError：无法设置null的属性'innerHTML'？我以为我理解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>

Answer 1

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

Answer 2

你需要告诉javascript执行“onload”操作...试试这个：

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

Answer 3

我看到所有技术人员都提供了如何解决问题的解决方案，但没有人能够理解为什么它首先发生的原因或根本原因。

为什么我会收到错误或未捕获的TypeError：无法设置属性＆＃39; innerHTML的＆＃39;是吗？

浏览器始终从上到下加载整个HTML DOM。编写在script标记内的任何JavaScript代码（存在于HTML文件的head部分中）都会被浏览器呈现引擎执行，甚至在您的整个DOM（在body标记中存在各种HTML元素标记）之前。 head标记中的脚本尝试访问具有标识hello的元素，甚至在它实际在DOM中呈现之前。显然，JavaScript无法看到该元素，因此您最终会看到空引用错误。

如何让它像以前一样工作？

你想要显示＆＃34; hi＆＃34;用户第一次登陆页面时，页面上会显示消息。因此，当您完全确定DOM已完全加载且hello id元素可访问/可用时，您需要在某个时刻连接代码。它可以通过两种方式实现：

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

＆＃13;

    <!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>

＆＃13;

使用事件挂钩：浏览器的呈现引擎通过window.onload事件提供基于事件的挂钩，该事件为您提供浏览器已完成加载DOM的提示。因此，当此事件被触发时，您可以放心，已经在DOM中加载了hello id的元素，并且之后尝试访问此元素的任何JavaScript都不会失败。所以你做了类似下面的代码片段。 请注意，在这种情况下，即使文档位于head标记内的HTML文档顶部，您的脚本也会正常工作。

＆＃13;

<!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>

＆＃13;

Answer 4

将您的JS放入window.onload

window.onload = function() {

        what();

        function what() {
            document.getElementById('hello').innerHTML = 'hi';
        };

    }

Answer 5

＆＃13;

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

＆＃13;

Answer 6

JavaScript部分需要运行一次页面被加载因此建议将JavaScript脚本放在正文标记的末尾

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

Answer 7

Javascript看起来不错。尝试在div加载后运行它。尝试仅在文档准备好时运行。 jquery中$(document).ready。

Answer 8

这是我的代码片段。我希望它对你有所帮助。

<!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>

Answer 9

您可以尝试使用setTimeout方法确保首先加载html。

Answer 10

<块引用>

我已将我的 <script> 标签移到 <body> 标签下方。试试吧

<body>
    <p>The time is <span id="time"></span>.</p>
</body>

<script>
// Allways keep script at end for date and time object //

    var d = new Date();

    document.getElementById("time").innerHTML = d;
    
</script>

Answer 11

让DOM加载。要在DOM中执行某些操作，您必须先加载它。对于您的情况，您必须先加载<div>标签。那么您需要进行一些修改。如果您首先加载js，则该函数将查找您的HTML以执行您要执行的操作，但是当此时加载HTML时，您的函数将找不到HTML。因此，您可以将脚本放在页面底部。在<body>标记内，则该函数可以访问<div>，因为在您点击脚本时已加载DOM。

Answer 12

有不同的可能原因，如所讨论的，只是想为可能与我的问题相同的人添加。

就我而言，我缺少一个如下所示的close div

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

缺少div可能会导致从子对象到父对象或父对象到子对象的横向混乱，因此当您尝试访问DOM中的元素时会导致错误

Answer 13

毫无疑问，这里的大多数答案都是正确的，但是您也可以这样做：

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});

Answer 14

错误是不言自明的，它没有获得要在其中设置数据的HTML标记，因此，使标记可用于JS，那么只有您可以将Data设置为该标记。

Answer 15

根本原因是：页面上的HTML必须在javascript代码之前加载。有两种解决方法：

1）允许在js代码之前加载HTML。

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

//or set time out like this:
<script type ="text/javascript">
    setTimeout(function(){
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
    }, 50);
    //NOTE: 50 is milisecond.
</script>

2）将js代码移动到HTML代码下

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

Answer 16

即使在html渲染完成后加载脚本，也会出现此错误。在此示例中，您的代码

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

在div内没有任何值。由于内部没有值可更改，因此会引发错误。应该是

<div id="hello">Some random text to change</div>

然后。

Answer 17

我遇到了同样的问题，结果是null错误是因为我没有保存我正在使用的html。

如果在加载页面后尚未保存所引用的元素，则为“＃”;因为文档在加载时不包含它。使用window.onload也有助于调试。

我希望这对你有用。

Answer 18

＆＃13;

<!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>

＆＃13;

Answer 19

将jquery添加到var equal = JSON.stringify(arr1.sort()) == JSON.stringify(arr2.sort())

< head>

使用$ document.ready（） ：代码可以在<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>或单独的文件中，例如main.js

1）在同一个文件中使用js（在< head>中添加）：

< head>

2）使用像main.js这样的其他文件（在<script> $( document ).ready(function() { function what(){ document.getElementById('hello').innerHTML = 'hi'; }; }); </script>中添加）：

< head>

并在main.js文件中添加代码：）

Answer 20

您需要将div更改为p。从技术上讲，innerHTML意味着它位于<??? id=""></???>部分内。

变化：

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

到

<p id="hello"></p>

这样做的：

document.getElementById('hello').innerHTML = 'hi';

将转为

<div id="hello"></div> into this <div id="hello">hi</div>

实际上没有意义。

您也可以尝试更改：

document.getElementById('hello').innerHTML = 'hi';

进入这个

document.getElementById('hello').innerHTML='<p> hi </p> ';

让它发挥作用。

无法设置null的属性'innerHTML'

20 个答案: