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

【问题标题】：Cannot set property 'innerHTML' of null无法将属性“innerHTML”设置为 null
【发布时间】：2013-08-16 20:38:21
【问题描述】：

为什么我会收到错误或 Uncaught TypeError: Cannot set property 'innerHTML' of 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>

【问题讨论】：

标签： javascript onload innerhtml

【解决方案1】：

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

【讨论】：

如果你使用 window.onload = function name(){} div 之前还是之后都没有关系。
脆皮解决方案。但我仍然收到错误消息。在 chrome/fedora 25/apache 中

【解决方案2】：

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

为什么我会收到错误或 Uncaught TypeError: Cannot set property 'innerHTML' 是否为空？

浏览器总是从上到下加载整个 HTML DOM。任何写在 script 标签内的 JavaScript 代码（出现在你的 HTML 文件的 head 部分）都会被浏览器渲染引擎执行，甚至在你的整个 DOM（body 标签中出现的各种 HTML 元素标签）被加载之前。 head 标记中的脚本正在尝试访问 id 为 hello 的元素，甚至在它实际在 DOM 中呈现之前。很明显，JavaScript 无法看到该元素，因此您最终会看到空引用错误。

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

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

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

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

使用事件挂钩：浏览器的渲染引擎通过window.onload 事件提供基于事件的挂钩，它会提示您浏览器已完成加载 DOM。因此，当此事件被触发时，您可以放心，您的具有hello id 的元素已经加载到 DOM 中，并且此后触发的任何尝试访问此元素的 JavaScript 都不会失败。因此，您可以执行以下代码 sn-p 之类的操作。请注意，在这种情况下，即使您的脚本位于 HTML 文档顶部的 head 标记内，它也可以工作。
```
<!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>
```

【讨论】：

好东西，但我想补充一下，我不认为 document.getElementById(..).innerHTML 的功能。需要放在onload里面。因为它可以在 DOM 加载之前加载并且没有错误。只有它的调用需要是。jsfiddle.net/fbz6wLpd/8
这是完美的解决方案，您解决了我的问题，我尝试将其他代码附加到 HTML5 游戏中，在我使用您的代码并成功之前，我收到了 null 的查询。

【解决方案3】：

您可以告诉 javascript 执行“onload”操作...试试这个：

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

【讨论】：

【解决方案4】：

只需将你的 JS 放入 window.onload

window.onload = function() {

        what();

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

    }

【讨论】：

【解决方案5】：

JavaScript 部分需要在页面加载后运行，因此建议将 JavaScript 脚本放在 body 标签的末尾。

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

【讨论】：

请不要将您输入的每个单词都大写吗？

【解决方案6】：

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

【讨论】：

脚本标签中的 type 属性也已过时。
并导入 jquery 来解决这个问题是矫枉过正的，除非您打算在此项目中使用它。 window.onload 可能就足够了，但还有其他可用的事件。参考 MDN window: developer.mozilla.org/en-US/docs/Web/API/Window

【解决方案7】：

这是我的 sn-p 尝试一下。我希望它对你有帮助。

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

【讨论】：

【解决方案8】：

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

【讨论】：

您的回答是正确的，但我可以请求您在源代码周围添加一些上下文。仅代码的答案很难理解。如果您可以在帖子中添加更多信息，这将对提问者和未来的读者都有帮助。

【解决方案9】：

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

【讨论】：

【解决方案10】：

根本原因是：页面上的 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) 在HTML代码下移动js代码

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

【讨论】：

【解决方案11】：

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

【讨论】：

问题是第一个加载的html div ..比java脚本函数调用现在它工作...

【解决方案12】：

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

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

我希望这对你有用。

【讨论】：

【解决方案13】：

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

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

在 div 中没有任何值。所以引发了错误，因为里面没有改变的价值。应该是的

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

那么。

【讨论】：

【解决方案14】：

错误是不言自明的，它没有获取您要在其中设置数据的 HTML 标记所以使标记对 JS 可用，然后只有您可以将数据设置为那个。

【讨论】：

【解决方案15】：

将 jquery 添加到 < head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

使用 $document.ready() ：代码可以在 < head> 或像 main.js 这样的单独文件中

1) 在同一文件中使用 js（在 < head> 中添加此内容）：

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2) 使用 main.js 等其他文件（将其添加到 < head>）：

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

并在 main.js 文件中添加代码:)

【讨论】：

【解决方案16】：

您需要将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> ';

让它工作。

【讨论】：

【解决方案17】：

毫无疑问，这里的大部分答案都是正确的，但你也可以这样做：

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

【讨论】：

【解决方案18】：

所讨论的可能原因不同，只是想为可能与我遇到相同问题的人添加此内容。

在我的情况下，我缺少如下所示的关闭 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 中的元素时导致错误

【讨论】：

请按照 OP 示例回答。
@mishsx 我回复的原因：我遇到了完全相同的错误，当我搜索时，我看到了每个人的修复，但不是我自己的修复，问同样的问题会重复，我觉得其他人也可能处于完全相同的情况，我决定发布我自己的错误并修复为回复......正如你所看到的，回复中明确说明了因此它对那些处于完全相同情况的人有所帮助但其他人清楚，这不是解决问题中的错误的方法。如果这不行，请就我应该如何在不重复的情况下做出替代错误和修复已知的建议提出建议

【解决方案19】：

让 DOM 加载。要在 DOM 中做某事，您必须先加载它。在您的情况下，您必须先加载 <div> 标签。那么你有一些东西要修改。如果您首先加载 js，那么该函数正在寻找您的 HTML 来执行您要求做的事情，但是当您的 HTML 正在加载并且您的函数找不到 HTML 时。所以你可以把脚本放在页面底部。在<body> 标签内，那么函数就可以访问<div>，因为在你点击脚本的时候DOM 已经被加载了。

【讨论】：

【解决方案20】：

我已将 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>

【讨论】：

【解决方案21】：

当我在 if-check 上使用 Django 模板标签以查看字段是否有可用值时，这发生在我身上 - 如果没有值，我从页面中删除了与该值相关的所有内容以保持整洁唯一的问题是我删除的内容包括我尝试使用的 div 和 id！如果存在值，则没有问题，因为包含我正在使用的 id 的 div 存在。如果没有值，我会收到错误。一旦它击中我这就是正在发生的事情然后很容易修复，如果 if-check 是错误的，只需在其中添加 div。

之前

{% if model.value %}
<div id='my-id'>{{model.value}}</div>
{% endif %}

之后

{% if model.value %}
<div>{{model.value}}</div>
{% else %}
<div id='my-id'></div>
{% endif %}

【讨论】：