Javascript 未捕获的类型错误：无法读取 null 的属性“innerHTML”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9003270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Typeerror: cannot read property 'innerHTML' of null
提问by Davix Ponze
回答by jianbo.zheng
var idPost=document.getElementById("status").innerHTML;
The 'status' element does not exist in your webpage.
您的网页中不存在“状态”元素。
So document.getElementById("status") return null. While you can not use innerHTML property of NULL.
所以 document.getElementById("status") 返回 null。虽然您不能使用 NULL 的 innerHTML 属性。
You should add a condition like this:
您应该添加这样的条件：
if(document.getElementById("status") != null){
var idPost=document.getElementById("status").innerHTML;
}
Hope this answer can help you. :)
希望这个回答能帮到你。:)
回答by egiray
Update:
更新：
The question doesn't ask for jquery. So lets do it without jquery:
这个问题不要求jquery。所以让我们在没有 jquery 的情况下做到这一点：
document.addEventListener("DOMContentLoaded", function(event) {
//Do work
});
Note this method will not work on IE8.
请注意，此方法不适用于 IE8。
Old Answer:
旧答案：
You are calling this script before DOM is ready. If you write this code into jquery's $(function() method it will work.
您是在 DOM 准备好之前调用此脚本。如果您将此代码写入 jquery 的 $(function() 方法中，它将起作用。
回答by Kel_Ebek
I had similar problem, but I had the existing id, and as egiray said, I was calling DOM before it loaded and Javascript console was showing same error, So I tried:
我有类似的问题，但我有现有的 id，正如 egiray 所说，我在加载 DOM 之前调用了它，并且 Javascript 控制台显示了同样的错误，所以我尝试了：
window.onload = (function(){myfuncname()});
and it start working
它开始工作
回答by James Shuttler
While you should ideally highlight the code which is causing an error and post that within your question, the error is because you are trying to get the inner HTML of the 'status' element:
虽然理想情况下您应该突出显示导致错误的代码并将其发布在您的问题中，但错误是因为您试图获取“状态”元素的内部 HTML：
var idPost=document.getElementById("status").innerHTML;
However the 'status' element does not existwithin your HTML - either add the necessary element or change the ID you are trying to locate to point to a valid element.
但是，您的 HTML中不存在“状态”元素- 添加必要的元素或更改您尝试定位的 ID 以指向有效元素。
回答by agalal designs
run the code after your html structure in the body statement
在 body 语句中的 html 结构之后运行代码
<html>
<body>
<p>asdasd</p>
<p>asdasd</p>
<p>asdasd</p>
<script src="myfile.js"></script>
</body>
</html>
回答by Catherine Gracey
If the script is in the head of your HTML document, the body of your HTML document has not yet been created by the browser, regardless of what will eventually be there (the same result occurs if your script is in the HTML file but above the element). When your variable tries to find document.getElementById("status") it does not yet exist, and so it returns a value of null. When you then use the variable later in your code, the initial value (null) is used and not the current one, because nothing has updated the variable.
如果脚本位于 HTML 文档的头部，则浏览器尚未创建 HTML 文档的正文，无论最终会出现什么（如果脚本位于 HTML 文件中但位于元素）。当您的变量尝试查找 document.getElementById("status") 时，它还不存在，因此它返回 null 值。当您稍后在代码中使用该变量时，将使用初始值 (null) 而不是当前值，因为没有任何内容更新该变量。
I didn't want to move my script link out of the HTML head, so instead I did this in my JS file:
我不想将我的脚本链接移出 HTML 头，所以我在我的 JS 文件中这样做了：
var idPost //define a global variable
function updateVariables(){
idPost = document.getElementById("status").innerHTML; //update the global variable
}
And this in the HTML file:
这在 HTML 文件中：
<body onload="updateVariables()">
If you already have an onload function in place, you can just add the additional line to it or call the function.
如果您已经有一个 onload 函数，您可以向其中添加附加行或调用该函数。
If you don't want the variable to be global, define it locally in the function that you are trying to run and make sure the function is not called before the page has fully loaded.
如果您不希望该变量成为全局变量，请在您尝试运行的函数中本地定义它，并确保在页面完全加载之前未调用该函数。
回答by Swaraj Ghosh
//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>
