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:无法设置空属性“(设置'innerText')
我知道,如果我编写例如document.getElementById(element).innerText = nr,它就会工作,但是当我使用replit来编写代码时,它可以将它放入变量中,但是vscode是不一样的。
发布于 2022-08-23 16:11:49
这一行很可能是:
let change = document.getElementById("element")..。在DOM中的#元素h1之前调用。
一个快速的解决方法是将这一行移动到单击回调中,如下面所示。
一个可能更好的解决方法是将脚本的执行推迟到您知道元素在dom中的时候,例如:DOMContentLoaded事件。
评论者指出的其他选项包括使用延时属性或将<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>
发布于 2022-08-23 16:13:44
您的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
https://stackoverflow.com/questions/73461924
复制相似问题