未捕获的类型错误:无法读取属性'innerHTML'为null

Uncaught Typeerror: cannot read property 'innerHTML' of null

本文关键字：属性 innerHTML null 读取 类型 错误      更新时间：2023-09-26

有人能解释一下这个错误是什么吗？

未捕获的类型错误：无法读取空的属性"innerHTML"

这是导致问题的线路：

var idPost=document.getElementById("status").innerHTML;

var idPost=document.getElementById("status").innerHTML;

您的网页中不存在"status"元素。

因此document.getElementById（"status"）返回null。而不能使用NULL的innerHTML属性。

你应该添加这样一个条件：

if(document.getElementById("status") != null){
    var idPost=document.getElementById("status").innerHTML;
}

更新：

这个问题不需要jquery。因此，让我们在没有jquery的情况下完成它：

document.addEventListener("DOMContentLoaded", function(event) { 
    //Do work
});

请注意，此方法在IE8上不起作用。

老答案：

您将在DOM准备就绪之前调用此脚本。如果您将此代码写入jquery的$（function）方法，它就会工作。

如果脚本在HTML文档的头部，则浏览器尚未创建HTML文档的正文，而不管最终会创建什么（如果脚本位于HTML文件中但位于元素上方，则会出现相同的结果）。当您的变量试图查找document.getElementById（"status"）时，它还不存在，因此返回null值。当您稍后在代码中使用该变量时，将使用初始值（null），而不是当前值，因为没有任何内容更新该变量。

我不想把我的脚本链接从HTML头中移出，所以我在JS文件中这样做了：

var idPost //define a global variable
function updateVariables(){
    idPost = document.getElementById("status").innerHTML; //update the global variable
}

这个在HTML文件中：

<body onload="updateVariables()">

如果您已经有了一个onload函数，那么您可以添加额外的行或调用该函数。

如果不希望变量是全局的，请在尝试运行的函数中本地定义它，并确保在页面完全加载之前不会调用该函数。

我遇到了类似的问题，但我有现有的id，正如egiray所说，我在加载DOM之前调用了DOM，Javascript控制台显示了相同的错误，所以我尝试了：

window.onload = (function(){myfuncname()});

它开始工作。

在body语句中的html结构之后运行代码

    <html>
    <body>
    <p>asdasd</p>
    <p>asdasd</p>
    <p>asdasd</p>
    <script src="myfile.js"></script>
    </body>
    </html>

虽然理想情况下，您应该突出显示导致错误的代码，并将其发布在您的问题中，但错误是因为您试图获取"status"元素的内部HTML：

var idPost=document.getElementById("status").innerHTML;

但是，"status"元素在HTML中不存在-添加必要的元素或更改要查找的ID以指向有效元素。

是否在#status元素之前声明<script>标记？

如果这样做，那么将首先执行该标记中的语句，现在没有id为status的元素。

最好的方法是将此脚本标记放在</body>标记之前。

//Run with this HTML structure
<!DOCTYPE html>
<head>
    <title>OOJS</title>
</head>
<body>
    <div id="status">
    </div>
    <script type="text/javascript" src="scriptfile.js"></script>
</body>
</html>

看起来脚本在加载DOM之前执行。尝试异步加载脚本。

 <script src="yourcode.js" async></script>

我在GitHub上进行案例研究时使用的一个文件也出现了同样的错误。我注意到出现这个错误是因为外部JavaScript文件声明是在HTML文件的<head></head>字段中定义的。当在HTML文件的<body></body>字段末尾声明外部JavaScript文件时，可以解决可能导致此问题的情况。

console.log(document.getElementById("container").innerHTML);
console.log(document.getElementsByClassName("content")[0].innerHTML);
console.log( $(".content")[0].innerHTML );
console.log( $(".content").html() );
console.log( $("#container")[0].innerHTML );
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/style.css">
  <title>jQuery</title>
</head>
<body>
  <div id="container">
    <h3>jQuery Library</h3>
    <p class="content">jQuery is a JS library.</p>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>

如果在html文件中找不到id "status"，则显示错误。

在html文件中添加"status" id。例如：

<!DOCTYPE html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="status">
        </div>
        <script type="text/javascript" src="scriptfile.js"></script>
    </body>
</html>

我犯了一个错误，我希望其他人能向我学习。我也犯了同样的错误：

app.js:116 Uncaught (in promise) ReferenceError: holder is not defined
    at getRandomMovieById (app.js:116:3)

我犯的错误是将一个Javascript文件用于两个HTML文件。我为我的每一个HTML创建了单独的文件，它的工作非常出色。

相关文章：