Не передаётся изменение состояние чекбокса

Question

Нужно закинуть изменения чекбокса в локалсторедж. Данные не поступают. Через консоль видно что клики не меняю булевое значение чекбокса. Все время при клики изначально заданное состояние. И тем самым изменения не происходят, а значит и нечего отправлять. Помогите, что проверить?

let addMessage = document.querySelector(".message"),
    addButton = document.querySelector(".add"),
    todo = document.querySelector(".todo");

let todoList = [];

addButton.addEventListener("click", function(){

    let newTodo = {
        todo: addMessage.value,
        checked: false,
        important: false
    };

    todoList.push(newTodo);
    displayMessages();
});

function displayMessages(){
    let displayMessage = "";
    todoList.forEach(function(item, i){
        displayMessage +=
            `<li>
                <input type="checkbox" id="item_${i}">
                <label for="item_${i}" > ${item.todo} </label>
            </li>`;
        todo.innerHTML = displayMessage;
    });
}

todo.addEventListener("change", function(event){ 
    let idInput = event.target.getAttribute("id");
    let forLabel = todo.querySelector("[for=" + idInput + "]");
    let valueLabel = forLabel.innerHTML;

    todoList.forEach(function(item){
        if(item.todo === valueLabel){
            item.checked = !item.checked;
            localStorage.setItem("todoLocal", JSON.stringify(todoList));
        }

        console.log(item.checked) // **тут при каждом клике false**

    });

});

<input type="text" class="message" placeholder="Описание">
<button class="add">Добавить</button>
<ul class="todo"></ul>

Answer 1

У вас проверка текста из лейбла не верная item.todo === valueLabel. Нужно либо .trim()-ить текст перед проверкой, либо удалить пробелы вокруг текста:

<label for="item_${i}" >${item.todo}</label>

Такие ошибки легко видеть в отладчике или просто через console.log каждой строчки.

БЛОГ НА HUSL

Не передаётся изменение состояние чекбокса

Ответы (1 шт):