Javascript 未捕获类型错误：无法读取属性'；增补列表器'；空值。var one打印空值_Javascript_Dom_Dom Events_Addeventlistener

Javascript 未捕获类型错误：无法读取属性'；增补列表器'；空值。var one打印空值

javascript dom

Javascript 未捕获类型错误：无法读取属性'；增补列表器'；空值。var one打印空值,javascript,dom,dom-events,addeventlistener,Javascript,Dom,Dom Events,Addeventlistener,即使变量1在控制台中打印为空 HTML代码是： console.log("connected"); var one = document.getElementById("Click") console.log(one); one.addEventListener('click',function a() { one.textContent = 'Clicked'; }) 点击基思的作品。但是更简洁的方法是，仅在DOM已加载的情况下添加事

即使变量1在控制台中打印为空

HTML代码是：

console.log("connected");

var one = document.getElementById("Click")

console.log(one);

one.addEventListener('click',function a() {
    one.textContent = 'Clicked';
})


点击

基思的作品。但是更简洁的方法是，仅在DOM已加载的情况下添加事件侦听器（即，将代码分配给

window.onload

函数）。这样，您可以将

-标记保留在您想要的任何位置（建议在

中）。并从

函数a（）中删除a（）

，因为您将以匿名函数的形式传入该函数，因此该函数不应有名称。像这样：

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
    </head> 
    <body> 
        <script src="x.js"></script> 
        <h1 id="Click">Click</h1> 
    </body> 
</html>

错误正在告诉您该标记（尚未）不存在

原因 HTML是从上到下计算的，所以在创建具有特定id的标记之前，脚本是经过计算的

简单的解决办法详情如下：

window.onload = function() {
    console.log("connected");

    var one = document.getElementById("Click");

    console.log(one);

    one.addEventListener('click', function() {
        one.textContent = 'Clicked';
    });
 };

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
    </head> 
    <body> 
        <h1 id="Click">Click</h1> 
        <script src="x.js"></script> 
    </body> 
</html>

及


点击

因为这不会妨碍您在编写和维护HTML时的自主性。其思想是创建一个函数，该函数在加载

body

时触发。加载

正文

时，您可以确保您的

h1

也已加载。

您能告诉我，您实际包含

标签的时间吗？而且，如果可能的话，您是否也可以提供

html

代码？单击我的HTML代码在定义h1之前运行脚本，将脚本放在

标记之前。

function load() {
    console.log("connected");
    var one = document.getElementById("Click")

    console.log(one);

    one.addEventListener('click',function a() {
        one.textContent = 'Clicked';
    })
}

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
        <script src="x.js"></script> 
    </head> 
    <body onload="load()"> 
        <h1 id="Click">Click</h1> 
    </body> 
</html>