Я пытаюсь написать 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();
})
}