Add extra checkboxes to implement previously checked/unchecked functionality

Question

This form is a to-do list with HTML/CSS/JavaScript, and each row has a checkbox based on completed or unfinished tasks. I created an event. It gets some values ​​from an object, like text, creation time, ID, etc., and finally appends a li tag to innerHTML+=... If I have the previous checkbox checked in but when the event is triggered (button pressed) the new row is added unchecked (which is normal) but the checkbox of the previous row is also unchecked ! ?

P粉381463780 · Answer

Here is a quick code snippet that replicates your problem. Run it and then make a check element on the checkbox. Notice that checking/unchecking the checkbox doesn't change the HTML code you're checking?

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    document.getElementById('addNewBtn').addEventListener('click', onAddBtnClick, false);
}

function onAddBtnClick(evt)
{
    let newStr = "";
    document.querySelector('ul').innerHTML += newStr;
}

This is an alternative code snippet that adds an item to the end of the list.

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    document.getElementById('addNewBtn').addEventListener('click', onAddBtnClick2, false);
}

function onAddBtnClick2(evt)
{
    let newLi = document.createElement('li');
    newLi.innerHTML = "";
    document.querySelector('ul').appendChild(newLi);
}