未捕获的类型错误：无法读取 null 的属性“innerHTML”
Posted
技术标签:
【中文标题】未捕获的类型错误：无法读取 null 的属性“innerHTML”【英文标题】：Uncaught Typeerror: cannot read property 'innerHTML' of null 【发布时间】：2012-02-18 16:04:45 【问题描述】：谁能解释一下这些错误是什么？
查看我的website 这是导致错误的行：
var idPost=document.getElementById("status").innerhtml;
谢谢
【问题讨论】：
【参考方案1】：var idPost=document.getElementById("status").innerHTML;
您的网页中不存在“状态”元素。
所以 document.getElementById("status") 返回 null。虽然不能使用 NULL 的 innerHTML 属性。
你应该添加这样的条件：
if(document.getElementById("status") != null)
var idPost=document.getElementById("status").innerHTML;
【讨论】：
在这种情况下，这对我来说就像一个魅力jsfiddle.net/gqrhcu6f【参考方案2】：更新：
该问题不要求 jquery。所以让我们不用 jquery 来做吧：
document.addEventListener("DOMContentLoaded", function(event)
//Do work
);
请注意，此方法不适用于 IE8。
旧答案：
您在 DOM 准备好之前调用此脚本。如果将此代码写入 jquery 的 $(function() 方法，它将起作用。
【讨论】：
这是我的罪魁祸首。这一点绝对应该包含在最佳答案中。 是的，这是简单的答案，应该放在首位。 @MattSom 不，不应该，因为这个问题从来没有包含任何关于 jQuery 的内容，而且这种行为不需要 jQuery。【参考方案3】：如果脚本位于 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 函数，您可以在其中添加额外的行或调用该函数。
如果您不希望变量是全局变量，请在您尝试运行的函数中本地定义它，并确保在页面完全加载之前不调用该函数。
【讨论】：
【参考方案4】：在正文语句中的 html 结构之后运行代码
<html>
<body>
<p>asdasd</p>
<p>asdasd</p>
<p>asdasd</p>
<script src="myfile.js"></script>
</body>
</html>
【讨论】：
【参考方案5】：我遇到了类似的问题，但我有现有的 id，正如 egiray 所说，我在加载 DOM 之前调用了它，并且 javascript 控制台显示了同样的错误，所以我尝试了：
window.onload = (function()myfuncname());
它开始工作了。
【讨论】：
【参考方案6】：虽然您最好突出显示导致错误的代码并将其发布在您的问题中，但错误是因为您试图获取“状态”元素的内部 HTML：
var idPost=document.getElementById("status").innerHTML;
但是，“状态”元素在您的 HTML 中不存在 - 请添加必要的元素或更改您尝试定位的 ID 以指向有效元素。
【讨论】：
【参考方案7】：//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>
【讨论】：
【参考方案8】：看起来脚本在 DOM 加载之前执行。 尝试异步加载脚本。
<script src="yourcode.js" async></script>
【讨论】：
为什么添加异步标签会有帮助？如here 所述，使用此标记将使脚本尽快执行（可能在 DOM 可用之前）。 如果存在“async”属性，脚本和 DOM 将同时运行。如果你想延迟脚本的执行，直到 DOM 准备好，你可以使用“defer”属性。否则脚本将尝试在尚不存在的元素上运行。【参考方案9】：你是在#status元素之前声明<script>标签吗？
如果这样做，该标签中的语句将首先执行，现在没有id为status的元素。
最好的方法是把这个脚本标签放在</body>标签之前之前。
【讨论】：
【参考方案10】：我在 GitHub 上进行案例研究时使用的文件遇到了同样的错误。我注意到发生此错误是因为在 HTML 文件的 <head></head> 字段中定义了外部 JavaScript 文件声明。在 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>【讨论】：
【参考方案11】：如果在 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>
【讨论】：
以上是关于未捕获的类型错误：无法读取 null 的属性“innerHTML”的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取 null 的属性“getContext”
为啥我会收到此错误：未捕获的类型错误：无法读取 null 的属性 'classList'
未捕获的类型错误：在输入单击时无法读取 null 的属性“样式”