Question

无法设置属性 innerText

2022-08-23

1045

javascript html innertext

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>

js

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

我收到此错误“plm.js:5 Uncaught TypeError: 无法设置 null 属性（设置“innerText”）

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

Answer 1

很可能是这一行：

   let change = document.getElementById("element")

... 在 #element h1 进入 DOM 之前被调用。

一个快速修复方法是将此行移到点击回调中，如下所示。

一个可能更好的修复方法是推迟脚本的执行，直到您知道元素在 dom 中，例如： DOMContentLoaded 事件

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

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>

Answer 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