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

97

为什么会出现错误或Uncaught 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>
javascript  onload  innerhtml 
— 约书亚W
source

Answers:

170

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

— 埃里克·戈达尔（Erik Godard）
source
17
如果您使用window.onload = function name（）{}，则div之前还是之后都没有关系。
— 2013年
1
脆皮解决方案。但是我仍然遇到错误。在chrome / fedora 25 / apache中
— Sahu V Kumar，
我有这个问题，我在useEffect中添加代码，但是我出错了！我能怎么做 ？useLayoutEffect（（）=> {const elemNext = document.querySelector（“＃infinite-carousel> button.InfiniteCarouselArrow.InfiniteCarouselArrowNext”）; elemNext.innerHTML =“ next”;×TypeError：无法设置null的elemNext.innerHTML属性'innerHTML' =“下一步”；
— Moshtaba Darzi
48

首先让我们尝试了解根本原因是什么。

为什么会出现错误或Uncaught TypeError：无法将属性'innerHTML'设置为null？

浏览器始终从上到下加载整个HTML DOM。甚至在加载整个DOM（body标签中存在各种HTML元素标签）之前，浏览器呈现引擎便会执行script标记内（位于headHTML文件的部分中）的所有JavaScript代码（由HTML标记）。head标记中存在的脚本hello甚至在实际上已将其呈现在DOM中之前都试图访问具有id的元素。很明显，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>
展开摘要

  1. 使用事件挂钩：浏览器的呈现引擎提供基于事件的挂钩window.onload事件，可向您提示浏览器已完成DOM的加载。因此，在触发此事件时，您可以放心，您的helloid已被加载到DOM中的元素以及此后触发的尝试访问此元素的任何JavaScript都不会失败。因此，您可以执行以下代码段。请注意，在这种情况下，即使脚本位于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>
展开摘要

— 彩铃
source
好东西，但是我要补充一点，我不认为执行document.getElementById（..）。innerHTML的函数。需要放在onload内。因为可以在DOM加载之前加载，所以没有错误。只需调用即可。jsfiddle.net/fbz6wLpd/8
— barlop
40

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

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

只需将您的JS放入 window.onload

window.onload = function() {

        what();

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

    }
— 里雅吉汗
source
6

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

— JT诺兰
source
1
脚本标记中的type属性也已过时。
— JT诺兰
2
导入jquery来解决这个问题是多余的，除非您打算在这里继续将其用于本项目。window.onload可能就足够了，但是还有其他事件可用。window
— 参阅以下网址
6

页面加载后，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>
展开摘要

— 用户名
source
2
您将停止输入的每个单词都大写吗？
— VortexYT '18
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>
展开摘要

— 用户名
source
您的回答是正确的，但我想请您在您的源代码周围添加一些上下文。仅代码的答案很难理解。如果您可以在帖子中添加更多信息，将对询问者和将来的读者都有帮助。
— RBT
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首先加载。

— 涡流
source
3

根本原因是：必须在javascript代码之前加载页面上的HTML。解决方法有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>
— 派恩斯
source
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>
展开摘要

— 用户名
source
问题是拳头html div加载..than现在调用它的java脚本函数就可以了...
— user2114253
1

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

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

我希望这对您有用。

— 瘟疫
source
1

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

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

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

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

然后。

— 马尔科·斯利杰普维奇
source
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文件中添加代码：）

— abe312
source
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> ';

使它工作。

— 用户名
source
0

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

— Shubham
source
0

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

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});
— Shrey Tripathi
source
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中的元素时会导致错误

— 代理蜂
source
请按照操作示例进行回答。
— mishsx
@mishsx答复的原因：我遇到了完全相同的错误，当我搜索时看到了每个人的修复程序，但不是我自己的解决方案，问同样的问题会重复，我觉得其他人可能完全相同同样的情况，我决定发布我自己的错误并作为代表进行修复。如您所见，答复中已明确说明，因此这对处于完全相同情况的人会有所帮助，但对其他人来说则是不能解决问题中的错误。如果这不是我应该怎么做另一种错误和修复而无需复制知行，请咨询
— Proxybee
0

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

— 鹤山HH
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.