127

为什么我会收到错误或未捕获的 TypeError：无法将属性“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>
4

21 回答 21

213

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

于 2013-08-14T18:31:30.680 回答
60

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

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

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

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

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

  1. 重新排序你的脚本：这样你的脚本只有在包含你的helloid 元素的 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>

  2. 使用事件挂钩：浏览器的渲染引擎通过window.onload事件提供基于事件的挂钩，它会提示您浏览器已完成加载 DOM。因此，当此事件被触发时，您可以放心，您的helloid 元素已经加载到 DOM 中，并且此后触发的任何尝试访问此元素的 JavaScript 都不会失败。因此，您可以执行以下代码片段之类的操作。请注意，在这种情况下，即使您的脚本出现在 HTML 文档顶部的headtag内，它也能正常工作。

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

于 2017-04-11T08:59:17.397 回答
39

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

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
于 2013-08-14T18:33:50.780 回答
13

把你的JS放进去window.onload

window.onload = function() {

        what();

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

    }
于 2016-02-01T06:09:36.377 回答
12

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>

于 2016-02-01T05:59:24.167 回答
7

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

于 2013-08-14T18:30:29.440 回答
5 

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

于 2016-04-08T07:14:44.233 回答
4

这是我的片段尝试一下。我希望它对你有帮助。 

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

于 2015-05-23T05:28:21.187 回答
4

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

于 2016-08-22T17:27:44.867 回答
3

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

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>
于 2019-03-02T06:48:04.730 回答
1

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

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

我希望这对你有用。

于 2017-08-20T21:02:32.023 回答
1

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

于 2019-10-18T05:45:34.610 回答
1

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

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

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

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

然后。

于 2019-01-23T21:33:45.163 回答
1 

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

于 2017-07-23T07:31:13.473 回答
0

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

于 2020-08-04T19:41:58.387 回答
0

当我在 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 %}
于 2021-08-27T03:06:50.333 回答
0

将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 文件中添加代码:)

于 2016-10-09T21:08:58.937 回答
0

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

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});
于 2020-05-28T10:57:22.860 回答
0

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

就我而言，我缺少一个关闭 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 中的元素时会导致错误

于 2020-07-15T04:24:31.583 回答
0

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

让它工作。

于 2016-04-08T07:12:36.890 回答
0

我已将 < 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>
于 2021-04-20T12:00:13.930 回答