`TypeError`：`checkbox` 在尝试添加事件监听器时为 `null`

Question

我按下复选框，但未删除任务且未显示消息。

我试图在 Firefox 中调试它，它在下面标记的行中显示了这个错误： “ TypeError : checkbox is null ” 。

 var list = document.querySelector('.list'); var items = list.children; var emptyListMessage = document.querySelector('.no-tasks-message'); //functions var toggleEmptyListMessage = function() { if (items.length === 0) { emptyListMessage.classList.remove('hidden'); } else if (items.length > 0) { emptyListMessage.classList.add('hidden'); } } var addCheckHandler = function(item) { var checkbox = item.querySelector('.checkbox'); checkbox.addEventListener('change', function() { // This line throws the error. item.remove(); toggleEmptyListMessage(); }); }; for (var i = 0; i < items.length; i++) { addCheckHandler(items[i]); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale="> <title>To-do App</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--To-Do List--> <div class="todo-list"> <!--List--> <ul class="list"> <!--Template--> <template id="task-template"> <li class="list-item"> <div class="task-label"> <input class="checkbox" type="checkbox" id="task-n" name="task"> <label class="label" for="task-n"></label> </div> <div class="delete-btn">Delete</div> </li> </template> <!--Template--> <li class="list-item"> <div class="task-label"> <input class="checkbox" type="checkbox" id="task-1" name="task"> <label class="label" for="task-1">Eat</label> </div> <div class="delete-btn">Delete</div> </li> </ul> <!--List--> <p class="no-tasks-message hidden"> No tasks left </p> <input class="input" type="text" required> <input class="add-btn" type="submit" value="Add"> </div> <script src="js/script.js"></script> </body> </html>

Answer 1

好的，现在使用您的 HTML 标记，查看以下内容：

 var taskid=3, list = document.querySelector('.list'); var children = list.children; var emptyListMessage = document.querySelector('.no-tasks-message'); var tmpl = document.querySelector('#task-template'); var inp = document.querySelector('.input'); list.onclick=ev=>{ // click handler associated with div.list // will only do something, if the element is of class "checkbox": if (ev.target.classList.contains("checkbox")){ ev.target.parentNode.parentNode.remove(); emptyListMessage.classList.toggle('hidden',children.length); // hide or show message } }; document.querySelector('.add-btn').onclick=ev=> list.innerHTML+=tmpl.innerHTML.replace(/@1/g, inp.value).replace(/@2/g,++taskid)

 .hidden {display: none}

 <div class="todo-list"> <.--List--> <ul class="list"> <li class="list-item"> <div class="task-label">Task No. 1 <input class="checkbox" type="checkbox" id="task-1" name="task"> <label class="label" for="task-1">Eat</label> </div> <div class="delete-btn">Delete</div> </li> <li class="list-item"> <div class="task-label">Task No. 2 <input class="checkbox" type="checkbox" id="task-2" name="task"> <label class="label" for="task-2">Eat</label> </div> <div class="delete-btn">Delete</div> </li> <li class="list-item"> <div class="task-label">Task No. 3 <input class="checkbox" type="checkbox" id="task-3" name="task"> <label class="label" for="task-3">Eat</label> </div> <div class="delete-btn">Delete</div> </li> </ul> <!--List--> <!--Template--> <template id="task-template"> <li class="list-item"> <div class="task-label">Task No. @2 <input class="checkbox" type="checkbox" id="task-@2" name="task"> <label class="label" for="task-n">@1</label> </div> <div class="delete-btn">Delete</div> </li> </template> <!--Template--> <p class="no-tasks-message hidden"> No tasks left </p> <input class="input" type="text" required> <input class="add-btn" type="button" value="Add"> </div>

一些解释性说明：我使用委托事件处理，这大大简化了问题：每次创建新项目时不必附加事件，而是为父容器执行一次。 在我的脚本中，我将在.list中找到的 class“复选框”的每个复选框视为“删除信号”。

`TypeError`：`checkbox` 在尝试添加事件监听器时为 `null`

问题描述

1 个解决方案

解决方案1
0 2020-08-09 13:16:09

`TypeError`：`checkbox` 在尝试添加事件监听器时为 `null`

问题描述

1 个解决方案

解决方案1 0 2020-08-09 13:16:09

解决方案1
0 2020-08-09 13:16:09