0

Я пытаюсь написать to-do list на чистом js и сохранять мои данные в localstorage. Но при попытке добавить возможность редактирования задания я столкнулся с проблемой что не знаю как сохранить изменённое значение input в localstorage плюс если я отмечаю задание галочкой, тогда мой цикл "изменения" ломается, также я получаю ошибку Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[for=0]' is not a valid selector. Уверен что делаю что-то не правильно, но не понимаю что именно. Объясните мне как сохранять измененное значения моего задания(инпут) в localstorage. Вот мой код js.

window.onload = function () {

let addMessage = document.getElementById('addMessage');
let addTask = document.getElementById('addTask');
let ulli = document.querySelector('.todo');

let todoArr = [];


if(localStorage.getItem('ulli')){
    todoArr = JSON.parse(localStorage.getItem('ulli'));
    displayTasks();
}

addTask.addEventListener('click', function(){
    let newTodo = {
        todo: addMessage.value,
        checked: false,
        change: true
    };
    if (addMessage.value !== "") {
        todoArr.push(newTodo);
        displayTasks();
        localStorage.setItem('ulli', JSON.stringify(todoArr));
    }
    else return;
})

function displayTasks(){
    let displayTask = '';
    todoArr.forEach(function(item, index){
        displayTask += 
        `<li>\n` +
        `<input type="checkbox" class="checkThrougt" value="" id="item_${index}" ${item.checked ? "checked" : ''}>\n` +
        `<input id="${index}" for="item_${index}" type="text" value="${item.todo}" readonly="readonly" class="${item.checked ? 'ready-task' : 'readTask'}"/>\n` +
        `<svg class="change ${item.checked ? 'change-none' : ''}" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"/></svg>\n` +
        `<button class="button dell">Delete</button>\n` +
        `</li>\n`;
        ulli.innerHTML = displayTask;
    });
}
ulli.addEventListener('change', function(event){
    let idInput = event.target.getAttribute('id');
    let forLable = ulli.querySelector('[for='+ idInput + ']');
    let valueLabel = forLable.value;

    todoArr.forEach(function(item){
        if(item.todo === valueLabel){
            item.checked = !item.checked;
            displayTasks();
            localStorage.setItem('ulli', JSON.stringify(todoArr));
        }
    });
});

let delTask = document.querySelectorAll('.dell');
for(let i=0; i<todoArr.length; i++){
    delTask[i].onclick = function(){
        todoArr.splice(i, 1);
        // displayTasks();
        localStorage.setItem('ulli', JSON.stringify(todoArr));
    }
}

let editTask = document.querySelectorAll('.change');
let inputTask = document.querySelectorAll('.readTask');
for(let i=0; i<todoArr.length; i++){
    editTask[i].onclick = function(){
        inputTask[i].classList.toggle('edit');
        if(inputTask[i].hasAttribute('readonly')){
            inputTask[i].removeAttribute('readonly');
            console.log('edit...');
        }
        else {
            inputTask[i].setAttribute("readonly", "readonly");
            console.log('end edit');
        }
    }
}

let clearTasks = document.getElementById('clearTasks');
clearTasks.addEventListener('click', function(){
    localStorage.clear();
})

}
0

1 ответ 1

0

Сравните

`... for="item_${index}" ...`

и

'[for='+ idInput + ']'
2
  • Что вы имеете ввиду? Во втором случае я после сравниваю текст для проверки на выполнения задачи.
    – user485171
    11 фев 2022 в 12:26
  • 1
    стоило опубликовать это как комментарий, а не ответ. 11 фев 2022 в 12:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.