Javascript Get-TypeError:当运行一些js代码时捕鼠 //获取元素，添加一个单击侦听器。。。 document.getElementById（“父列表”）.addEventListener（“单击”，函数（e）{ //目标是被点击的元素！ //如果它是一个列表项 if（e.target&&e.target.nodeName==“LI”）{ //找到列表项！输出ID！ log（“列表项”，e.target.id.replace（“post-”），单击了！”）； } }); 第1项第2项第3项第4项第5项第6项_Javascript

Javascript Get-TypeError:当运行一些js代码时捕鼠 //获取元素，添加一个单击侦听器。。。 document.getElementById（“父列表”）.addEventListener（“单击”，函数（e）{ //目标是被点击的元素！ //如果它是一个列表项 if（e.target&&e.target.nodeName==“LI”）{ //找到列表项！输出ID！ log（“列表项”，e.target.id.replace（“post-”），单击了！”）； } }); 第1项第2项第3项第4项第5项第6项

javascript

Javascript Get-TypeError:当运行一些js代码时捕鼠 //获取元素，添加一个单击侦听器。。。 document.getElementById（“父列表”）.addEventListener（“单击”，函数（e）{ //目标是被点击的元素！ //如果它是一个列表项 if（e.target&&e.target.nodeName==“LI”）{ //找到列表项！输出ID！ log（“列表项”，e.target.id.replace（“post-”），单击了！”）； } }); 第1项第2项第3项第4项第5项第6项,javascript,Javascript,以上代码来自此处：问题: 我在Chrome和Firework中尝试了上述代码，它们都不起作用，在firefox->console中，它显示：TypeError:document.getElementById（…）为null，那么问题出在哪里？这是因为在执行脚本时加载了dom元素。将脚本移动到页面底部以解决问题，或在文档就绪时执行脚本例：捕鼠 window.onload=函数（）{ //获取元素，添加一个单击侦听器。。。 document.getElementById（“父列表”）.add

以上代码来自此处：

问题:

我在Chrome和Firework中尝试了上述代码，它们都不起作用，在firefox->console中，它显示：

TypeError:document.getElementById（…）为null

，那么问题出在哪里？

这是因为在执行脚本时加载了dom元素。将脚本移动到页面底部以解决问题，或在文档就绪时执行脚本

例：


捕鼠
window.onload=函数（）{
//获取元素，添加一个单击侦听器。。。
document.getElementById（“父列表”）.addEventListener（“单击”，函数（e）{
//目标是被点击的元素！
//如果它是一个列表项
if（e.target&&e.target.nodeName==“LI”）{
//找到列表项！输出ID！
log（“列表项”，e.target.id.replace（“post-”），单击了！”）；
}
});
}

第1项
第2项
第3项
第4项
第5项
第6项

当执行

document.getElementById（“父列表”）

时，没有id为父列表的元素，因为它在elment可用之前执行。您可以通过移动js代码来解决此问题：

<HTML>
<HEAD>
<TITLE>Mouse Capture</TITLE>
<SCRIPT>
window.onload = function(){
    // Get the element, add a click listener...
    document.getElementById("parent-list").addEventListener("click",function(e) {
        // e.target is the clicked element!
        // If it was a list item
        if(e.target && e.target.nodeName == "LI") {
            // List item found!  Output the ID!
            console.log("List item ",e.target.id.replace("post-")," was clicked!");
        }
    });
}
</SCRIPT>
</HEAD>
<BODY>
<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>
</BODY>
</HTML>


捕鼠

第1项
第2项
第3项
第4项
第5项
第6项

//获取元素，添加一个单击侦听器。。。
document.getElementById（“父列表”）.addEventListener（“单击”，函数（e）{
//目标是被点击的元素！
//如果它是一个列表项
if（e.target&&e.target.nodeName==“LI”）{
//找到列表项！输出ID！
log（“列表项”，e.target.id.replace（“post-”），单击了！”）；
}
});

脚本位于顶部，元素位于下方。在浏览器中按顺序加载内容。

<HTML>
<HEAD>
<TITLE>Mouse Capture</TITLE>
<SCRIPT>
window.onload = function(){
    // Get the element, add a click listener...
    document.getElementById("parent-list").addEventListener("click",function(e) {
        // e.target is the clicked element!
        // If it was a list item
        if(e.target && e.target.nodeName == "LI") {
            // List item found!  Output the ID!
            console.log("List item ",e.target.id.replace("post-")," was clicked!");
        }
    });
}
</SCRIPT>
</HEAD>
<BODY>
<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Mouse Capture</TITLE>
</HEAD>
<BODY>
<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>
<SCRIPT>
// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target is the clicked element!
    // If it was a list item
    if(e.target && e.target.nodeName == "LI") {
        // List item found!  Output the ID!
        console.log("List item ",e.target.id.replace("post-")," was clicked!");
    }
});
</SCRIPT>
</BODY>
</HTML>