无法设置 null 的属性‘ innerHTML’

小开

Javascript 看起来不错。尝试在 div 加载后运行它。只有在文档准备好时才尝试运行。Jquery 中的 $(document).ready。

小开

最佳答案

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

小开

你可以告诉 javascript 执行“ onload”操作... 试试这个:

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

小开

这里是我的片段尝试它。我希望它将有助于你。

<!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>

小开

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>

小开

把你的 JS 放到 window.onload

window.onload = function() {


what();


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


}

小开

您需要将 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> ';

才能成功。

小开

<!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>

小开

您可以尝试使用 setTimeout 方法来确保首先加载 html。

小开

将 jquery 添加到 < head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

使用 $document.ready () < em > : 代码可以位于 < 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 文件中添加代码:)

小开

让我们首先试图理解为什么会发生这种情况的根本原因。

为什么我得到一个错误或未捕获的 TypeError: 无法设置属性 ‘ innerHTML’为 null？

浏览器总是从上到下加载整个 HTML DOM。任何编写在 script标记内的 JavaScript 代码(在 HTML 文件的 head部分中)甚至在加载整个 DOM (主体标记中存在的各种 HTML 元素标记)之前就由浏览器呈现引擎执行。head标记中的脚本试图访问一个 id 为 hello的元素，甚至在该元素实际呈现在 DOM 中之前就这样做了。因此，很明显，JavaScript 未能看到元素，因此您最终会看到 null 引用错误。

你怎么能让它像以前一样工作？

您希望在用户第一次到达您的页面时立即在页面上显示嗨消息。因此，您需要在完全确定 DOM 已经完全加载并且 hello id 元素可访问/可用的时候挂接代码。这可以通过两种方式实现:

重新排序脚本 : 这样，只有在包含 hello id 元素的 DOM 已经加载之后，才会触发脚本。您可以通过在所有 DOM 元素之后移动 script 标记来实现它，例如，在 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>
```
使用事件挂钩 : Browser 的渲染引擎通过 window.onload事件提供了一个基于事件的挂钩，它提示您浏览器已经完成了加载 DOM。因此，当这个事件被触发时，您可以放心，id 为 hello的元素已经加载到 DOM 中，此后任何尝试访问这个元素的 JavaScript 都不会失败。因此，您可以执行下面的代码片段之类的操作。请注意，在这种情况下，即使脚本出现在 head标记中 HTML 文档的顶部，它也能正常工作。
```
<!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>
```

小开

<!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>

小开

我也遇到过同样的问题，原来 null 错误是因为我没有保存正在处理的 html。

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

我希望这对你有用。

小开

即使在 html 渲染结束后加载脚本，也可能出现此错误。在这个示例中，您的代码

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

在 div 中没有值。因为内部没有值可更改，所以会引发错误。应该是的

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

那么。

小开

根本原因是: 页面上的 HTML 必须在 javascript 代码之前加载。以两种方式解决:

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>

小开

这个错误是自我解释，它没有得到 HTML 标记，在其中您想要设置的数据，所以使标记可用于 JS，然后只有您可以设置数据。

小开

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

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

小开

有不同的可能的原因，讨论只是想添加这个人谁可能有相同的问题，我的。

在我的例子中，缺少一个如下所示的关闭 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 中的元素时导致错误

小开

让 DOM 加载。要在 DOM 中执行某些操作，必须首先加载它。在您的情况下，您必须首先加载 <div>标记。那你就有东西需要修改了。如果你先加载 js，那么这个函数正在寻找你的 HTML做你要求做的事情，但是当你的 HTML加载时，你的函数找不到 HTML。所以你可以把脚本放在页面的底部。然后函数可以访问 <div>，因为 DOM 已经在你点击脚本的时候加载了。

小开

我已经将我的 < 剧本 > 标记移到了 < 尸体 > 标记的下面

<body>
<p>The time is <span id="time"></span>.</p>
</body>


<script>
// Allways keep script at end for date and time object //


var d = new Date();


document.getElementById("time").innerHTML = d;
    

</script>

小开

当我在 if-check 中使用 Django 模板标签来查看是否有一个值可用于某个字段时，我发生了这种情况——如果没有值，我就从页面中删除所有与该值相关的内容，以保持整洁。唯一的问题是我删除的内容包括我正在使用的 div 和 id！如果存在一个值，那么没有问题，因为包含我正在处理的 id 的 div 存在。如果没有值，则收到错误。一旦我明白这是怎么回事，然后很容易修复，只需添加 div 在那里，如果 if-check 是假的。

之前

{% if model.value %}
<div id='my-id'>\{\{model.value}}</div>
{% endif %}

之后

{% if model.value %}
<div>\{\{model.value}}</div>
{% else %}
<div id='my-id'></div>
{% endif %}