无法设置属性 innerText答案

【问题标题】：Cannot set property innerText无法设置属性 innerText
【发布时间】：2022-08-24 00:13:44
【问题描述】：

html:

<!DOCTYPE html>
<html>
    <head>
<script src=\"plm.js\"></script>
    </head>
    <body>
<h1 id=\"element\">number</h1>
<button onclick=\"bruh()\">Add Num</button>

    </body>



</html>

let nr = 0
let change = document.getElementById(\"element\")
function bruh(){
    nr = nr + 1
 change.innerText = nr
}

我收到此错误 \"plm.js:5 Uncaught TypeError: Cannot set properties of null (setting \'innerText\')

我知道如果我写例如 document.getElementById(element).innerText = nr 它可以工作，但是当我使用 replit 编写代码时，它可以将它放在一个变量中，但在 vscode 上是不一样的

change 在脚本运行时未定义，因为当时该元素不在 DOM 中。将script 标记移动到body 的末尾。
或使用defer
将这一行 let change = document.getElementById(\"element\") 移动到 bruh() 中，使其成为函数的第一个语句。

标签： javascript html innertext

【解决方案1】：

这条线很可能是：

   let change = document.getElementById("element")

... 在 #element h1 位于 DOM 之前被调用。

一个快速的解决方法是将这条线移动到点击回调中，如下所示。

一个可能更好的解决方法是将脚本的执行推迟到你知道元素在 dom 中的时候，例如：DOMContentLoaded event

评论者指出的其他选项包括使用defer 属性或将标签移动到结束标签之前。

let nr = 0
function bruh(){
   let change = document.getElementById("element")
    nr = nr + 1
 change.innerText = nr
}

<h1 id="element">number</h1>
<button onclick="bruh()">Add Num</button>

【讨论】：

【解决方案2】：

您的 javascript 文件在它可以访问 DOM 之前正在运行。

改变这个：

<script src="plm.js"></script>

对此：

<script src="plm.js" defer></script>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer

【讨论】：

请看在上帝的份上清理你的代码