Question

<块引用>

index.html

<head>
    <script src="app.js"></script>
    <!-- <script src="error.js"></script> -->
</head>
<body>
    <p id="element">GetElementById</p>
</body>
</html>

<块引用>

app.js

console.log("Start");


document.getElementById("element").innerHTML = "Solve";


console.log("Stop")

如果你是 JavaScript 新手，你会在运行这段代码时遇到错误。这仅适用于该领域的新手和在线学习且无人帮忙的人。

Answer 1

当我不理解 JavaScript 错误原因时，我正在尝试帮助新程序员。

有时您会收到错误 getElementById(...) is null。我发布一个可以解决您的问题的解决方案可能有很多原因

当你刚开始编程并运行上面的代码时，你会得到一个错误，有简单的解决方案。

<块引用>

错误：未捕获的类型错误：document.getElementById(...) 为空

这只是因为您已经将文件顶部的脚本标记放置在您尝试通过 Id 获取的 html 元素之前。

<html lang="en">
<head>
</head>
<body>
    <p id="element">GetElementById</p>
    <script src="app.js"></script>
    <!-- Script below the element or you can place at the bottom  -->
    <h1>Javascrit</h1>
</body>
</html>

Answer 2

发生这种情况是因为您尝试访问的元素尚未在 DOM 中创建。您正在尝试更改不存在的元素。

即使 id="element" 已在 html 中定义，但脚本首先执行，然后才由 javascript 优先执行 DOM 创建。

为避免此类情况，最佳做法是使用“&&”或三元运算符。

我知道这些话对于新手程序员来说可能听起来难以抗拒，但本质上，您是在尝试在进行更改之前检查该元素是否存在。

只需将您的代码更改为：

document.getElementById("element") && document.getElementById("element").innerHTML = "Solve";

或者你可以像这样使用三元运算符：

document.getElementById("element")?document.getElementById("element").innerHTML = "Solve":"";

编程新手，不明白错误 Uncaught TypeError: document.getElementById(...) is null

2 个答案: