Question

我试图切换对li目标的检查，但是每次尝试时，都会出现错误

“未捕获的TypeError：无法读取null的属性'addEventListener'。”

据我所知，它可能是JavaScript或html的一部分，但我不知道。因此，将事件列表适当添加到列表目标的另一种方法或潜在解决方案是什么。

JavaScript函数

document.getElementById("tasks").addEventListener("click", function(e) {
    if (e.target.nodeName && e.target == "LI") {
        e.target.classList.toggle("checked");
    }
});

HTML代码

<form name="todolist" id="list">    
    <ul id="tasks">
        <li class="checked">                    
            One
        </li>
        <li>
            Two
        </li>
    </ul>   
</form>

Answer 1

似乎您的代码在DOM完全加载之前正在运行。您可以将代码放在正文的底部，也可以用DOMContentLoaded包装代码。

您可以按照以下方式尝试使用querySelectorAll()和forEach()：

.checked{
  color: red;
}

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    var list = document.querySelectorAll('#tasks li');
    list.forEach(function(el){
      el.addEventListener("click", function(e) {
        this.classList.toggle("checked");
      });
    });
  });
</script>

<form name="todolist" id="list">
  <ul id="tasks">
    <li class="checked">
        One
    </li>
    <li>
        Two
    </li>
  </ul>
</form>

Answer 2

在 window.onload 函数中使用代码来包装代码，以确保元素已正确加载。

window.onload=function(){
document.getElementById("tasks").addEventListener("click", function(e) {
            if (e.target.nodeName && e.target == "LI") {
            e.target.classList.toggle("checked");
        }
});
}

Answer 3

您对if语句有疑问，应该为

//e.target.nodeName == "LI"

<form name="todolist" id="list">

    <ul id="tasks">
        <li class="checked">

            One
        </li>
        <li>
            Two
        </li>
    </ul>


    <script>
    document.getElementById("tasks").addEventListener("click", function(e) {
        console.log(e.target.nodeName)
        if (e.target.nodeName && e.target.nodeName == "LI") {

        e.target.classList.toggle("checked");
    }
});
    </script>

如何为单击列表添加事件列表器？

3 个答案: