无法设置null的属性'innerHTML'

问题描述 投票：59回答：15

为什么我会收到错误或Uncaught 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>
javascript onload innerhtml
15个回答
108
投票

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

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

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> ';

使它工作。

0
投票

<!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>
0
投票

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

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

我希望这对你有用。

0
投票

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

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

在div里面没有任何价值。因此提出错误，因为内部没有任何改变的价值。它应该是

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

然后。

0
投票

根本原因是：页面上的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>
30
投票

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

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

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

为什么我会收到错误或Uncaught TypeError：无法设置null的属性'innerHTML'？

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

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

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

  1. 重新排序脚本：这样，只有在加载了包含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>
  1. 使用事件挂钩：浏览器的渲染引擎通过window.onload事件提供基于事件的挂钩，该事件为您提供浏览器已完成加载DOM的提示。因此，当这个事件被触发时，你可以放心，你的元素已经加载了DOM中的hello id，之后尝试访问这个元素的任何JavaScript都不会失败。所以你做了类似下面的代码片段。请注意，在这种情况下，即使脚本位于head标记内HTML文档的顶部，您的脚本仍然有效。

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

把你的JS放在window.onload

window.onload = function() {

        what();

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

    }
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>
5
投票

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

4
投票

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>
3
投票

这是我的剪辑试试吧。我希望它对你有帮助。

<!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>
3
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.