为什么我会收到错误或 Uncaught TypeError: Cannot set property 'innerHTML' of 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>
您必须将hellodiv 放在脚本之前，以便在加载脚本时它存在。
让我们首先尝试了解其发生的根本原因。
为什么我会收到错误或 Uncaught TypeError: Cannot set property 'innerHTML' of null？
浏览器总是从上到下加载整个 HTML DOM。甚至在加载整个 DOM（body 标签中存在的各种 HTML 元素标签）之前，浏览器渲染引擎都会执行script标记内编写的任何 JavaScript 代码（存在于headHTML 文件的部分）。head标签中的脚本试图访问具有 id 的元素，hello甚至在它实际在 DOM 中呈现之前。很明显，JavaScript 无法看到该元素，因此您最终会看到空引用错误。
你怎么能让它像以前一样工作？
您希望在用户第一次登陆您的页面时立即在页面上显示“嗨”消息。因此，当您完全确定 DOM 已完全加载并且helloid 元素可访问/可用时，您需要连接代码。它可以通过两种方式实现：
重新排序你的脚本：这样你的脚本只有在包含你的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>使用事件挂钩：浏览器的渲染引擎通过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>您可以告诉 javascript 执行“onload”操作...试试这个：
<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
把你的JS放进去 window.onload
window.onload = function() {
what();
function what() {
document.getElementById('hello').innerHTML = 'hi';
};
}
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>