Как заставить список работать правильно?

Question

[Жора]

Прелюдия: по сравнению со старым рабочем вариантом, скрин которого у меня есть, ничего не изменилось (или только мне так кажется).
Список дел сломался! Все задания в нем принимают имя прошлого и выходит что то типа "Погладить кота. Погладить кота. Погладить кота. Погладить кота." Примечание: при перезагрузке страницы и при создании новых пунктов заданий наследовать имя последнего созданного будут только те задания, которые созданы только в этой сессии, то есть будет так - "Погладить кота. Погладить кота. Погладить кота. Погладить кота. Сварить пельмени. Сварить пельмени." У меня нет ни малейшего представления что идет не так.
Предоставляю код. К вашему счастью я написал несколько комментариев (в некоторых местах они неправильные), так что разобраться в нем будет проще. Всем заранее спасибо! https://codepen.io/anon/pen/zVYONj?editors=1010#an...

Comments

[dollar]

То, что вы просите, называется отладкой. И это работа. То есть это полноценное задание. Чего стоит только погрузиться в предметную область! (подскажу: стоит времени)

Если проблема с языком JavaScript, то сделайте маленький рабочий пример, где легко видна проблема, чтобы профи смог увидеть ее за 15 секунд, и написать ответ еще за минуту.

[DanKud]

Во-первых объявляйте пустой временный объект temp внутри самой функции клика по кнопке, а не вне ее:

function toDoFun () { //Функция дополнения массива дел делами
    let data = toDoText.value; //Название дела
    if (data != '') { //Проверка на пустоту input'а
        temp = {};
        temp.taskName = data; //Запись в temp названия дела
        temp.check = false; //Запись в temp названия дела
        toDoList.push(temp); //Дополнение массива дел нашим temp'ом
        toDoOut(); //Вызов функции вывода в HTML списка дел
        localStorage.setItem('toDo', JSON.stringify(toDoList));
    }
}

Во-вторых замените чтениe свойства из temp внутри функции записи HTML на чтения свойства из toDoList:

function toDoOut () {  //Функция вывода в HTML списка дел
    let outputData = ''; //Создание пустой переменной, в которую будем добавлять дела
    for (var i = 0; i < toDoList.length; i++) {
        if (toDoList[i].check == true) { //Проверка checkbox'а на его значение
        .....
}

[Жора]

DanKud, все работает, спасибо!) Может подскажете еще как мне сохранить значение checkbox?

[DanKud]

Георгий, например так:

function toDoOut () {  //Функция вывода в HTML списка дел
    let outputData = ''; //Создание пустой переменной, в которую будем добавлять дела
    for (var i = 0; i < toDoList.length; i++) {
        if (toDoList[i].check == true) { //Проверка checkbox'а на его значение
            outputData += '<label><input class="checkbox" type="checkbox" data-task="' + toDoList[i].taskName + '" checked>' + toDoList[i].taskName + '</label>';
        } else {
            outputData += '<label><input class="checkbox" type="checkbox" data-task="' + toDoList[i].taskName + '">' + toDoList[i].taskName + '</label>';
        }
        toDoListOutputPlace.innerHTML = outputData;
    }
}

document.addEventListener('click', e => {
    if (e.target.classList.contains('checkbox')) {
        let local = JSON.parse(localStorage.getItem('toDo'));
        local.forEach((el, i) => {
            if (el.taskName === e.target.getAttribute('data-task')) {
                local[i].check = !el.check;
                localStorage.setItem('toDo', JSON.stringify(local));
            }
        })
    }
});