I want to add an event listener to the checkbox that is created within an <li> When the event is triggered I want to check if it is checked or unchecked From my understanding the event for a checkbox is "onChange" and the property is "checked" but my solution is not working.
Can someone please explain to me why this solution does not work? New to JavaScript so please explain in the most simple way. JavaScript only please Thank you in advance
HTML
<body>
<div class="wrapper">
<ul id="taskList">
</ul>
<div id="add-task-area">
<input type="text" id="addTaskInput" value="">
<button id="addTaskButton">Add Task</button>
</div>
</div>
</body>
JAVASCRIPT
let taskList = document.querySelector("#taskList");
const addTaskInput = document.querySelector("#addTaskInput");
const addTaskButton = document.querySelector("#addTaskButton");
const addTask = () => {
if (addTaskInput.value != " ") {
let taskItem = document.createElement("li");
let taskText = document.createElement("span");
taskText.textContent = addTaskInput.value;
let checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkBox");
checkBox.setAttribute("class", "checkbox");
let removeItem = document.createElement("button");
removeItem.setAttribute("class", "remove");
removeItem.textContent = "Delete";
taskList.appendChild(taskItem);
taskItem.appendChild(taskText);
taskItem.appendChild(checkBox);
taskItem.appendChild(removeItem);
addTaskInput.value = " ";
};
}
addTaskButton.addEventListener("click", addTask);
addTaskInput.addEventListener("keydown", (event) => {
if (event.keyCode == 13) {
addTask();
}});
let checkbox = document.querySelectorAll(".checkbox")
checkbox.addEventListener("onChange", test);
const test = () => {
if (checkbox.checked) {
alert("checked");
} else {
alert ("unchecked")
}
}
Aucun commentaire:
Enregistrer un commentaire