Question

我遇到了一个问题，但找不到有效的解决方案。我尝试在addEventListener行之前添加if（okButton）条件，但仍然无法获得所需的输出。也就是说，变量para指向的文本不会消失。

let para = document.getElementById('paragraph');
let okButton = document.getElementById('Ok-button');

okButton.addEventListener('click', function() {
    para.style.display='none';
});

错误消息如下：

script.js：4未捕获的TypeError：无法读取属性的“ addEventListener” 在VM2610处为null script.js：4（匿名）@ script.js：4

Answer 1

可能的原因：

您的元素在您的javaScript下面。
您的按钮ID为“确定”，但您已使用“确定”。 ID区分大小写。（在DOM和JS的情况下）

Answer 2

我将假设您的脚本位于文件的顶部。因此，如果您认为它是从上至下加载文件，则找不到okButton，因为在设置okButton时未加载页面的其余部分（DOM）。将脚本移到文件底部或将其放在页面加载函数的init（）内，这样，当页面完全加载后，您将设置okButton并将其存在于页面上。

Answer 3

尝试在按钮代码之前添加If语句，

var Ok-button = document.getElementById("Ok-button");
if (Ok-button.clicked == true) {
            para.style.display='none';
}

Answer 4

正如一些评论中所提到的，我在.js文件中使用的元素在HTML文档中的script标记下声明。将脚本标签移到结束正文标签上方即可解决此问题。

页面加载之前脚本似乎正在运行

4 个答案: