The elements I selected with querySelectorAll come 2 times in the for loop

February 15, 2024

I am trying to write a todo application and the completed part button works normally, but when I add a new element, it works as if the button is clicked 2 times.

I am writing a todo app and by default it works when I press complete on the items in the list.

But when I add a new element, the completed buttons do not work on the old ones, only on the new one.

I first select all the elements with querySelectorAll and then find the closest clicked completion button with closest and intervene. But when I debug, when I click on the button, it is as if the button is clicked 2 times.

// Add Todo Items
addTodoButton.addEventListener("click", () => {
    let newTodoItem = {
        "id": localStorage.getItem("systemID"),
        "value": addTodoInput.value,
        "checked": "false",
        "date": getDate()
    }
    let addHTML = normalTodoItem(newTodoItem["id"],newTodoItem["value"],newTodoItem["checked"],newTodoItem["date"])
    todoItemList.insertAdjacentHTML("beforeend", addHTML);
    let getData = JSON.parse(localStorage.getItem("todoItems"))
    getData.push(newTodoItem)
    let newData = JSON.stringify(getData)
    localStorage.setItem("todoItems", newData)
    addTodoInput.value = ""
    addTodoButton.disabled = true
    localStorage.setItem("systemID", Number(localStorage.getItem("systemID")) + 1)
    checkButton()
})

// Checked Button
function checkButton(){
    let checkedButton = document.querySelectorAll(".checkicon")
    for (let item of checkedButton) {
        item.addEventListener('click', () => {
         let click = item.closest('section')
            if(item.className.includes("fa-square-o")) {
                item.className = item.className.replace("fa-square-o", "fa-check-square-o");
            }else if(item.className.includes("fa-check-square-o")){
                item.className = item.className.replace("fa-check-square-o", "fa-square-o");
            }
            let getID = click.dataset.id
            let getData = JSON.parse(localStorage.getItem("todoItems"))
            let outputAll = getData
            let output = outputAll.find(output => output.id == getID)
            if(output["checked"] == "false"){
                output["checked"] = "true"
            }else{
                output["checked"] = "false"
            }
            let postJSON = JSON.stringify(outputAll)
            localStorage.setItem("todoItems", postJSON)
        })
    }
}
checkButton()

>Solution :

Every time you add a new item, you run checkButton – which adds an event listener to not only the new items but the existing ones as well

If you have an event handler that "toggles" a state, and run it twice, because you’ve added it twice (or 4 times, or any even number of times) … you see the problem, right

have you noticed when you add a third item, the first item seems to behave again? when you add a fourth, the 2nd behaves again … a fifth makes the 1st and 3rd work again

Simplest (though maybe not the best) solution:

function checkButton(){
    let checkedButton = document.querySelectorAll(".checkicon:not(.handled)"); // change this
    for (let item of checkedButton) {
        item.classList.add("handled"); // add this
        item.addEventListener('click', () => {