我按下复选框，但任务不会被删除，消息也不会显示。
我尝试在Firefox中调试它，它显示了以下错误:“TypeError:CheckboxisNull”。
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>null
好了，现在有了HTML标记，请看下面的内容:
null
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>