Не работает кнопка удаления в to-do

Question

Не работает кнопка удаления в to-do

Ермухаммед Ордабек Знаток (300), на голосовании 1 год назад

 let tasks = JSON.parse(localStorage.getItem('tasks')) || [];   //2
console.log(tasks)
// localStorage.setItem('tasks', JSON.stringify([]))   //1
let taskinput = document.getElementById('taskinput')
let addbtn = document.getElementById('addBtn')
let tasksblock = document.getElementById('tasks')
showtasks()
addbtn.addEventListener('click', ()=>{
    let task = {
        text: taskinput.value
    }
    tasks.push(task)
    localStorage.setItem('tasks',JSON.stringify(tasks))
    console.log(tasks)
    showtasks()
    taskinput.value = ''
})

function showtasks(){
    tasksblock.innerHTML = ''
    for(let i=0;i    {
        tasksblock.innerHTML = tasksblock.innerHTML+`
        №${i+1}: ${tasks[i].text}   

        `
    }
}
let delbtns = document.querySelectorAll('.delbtn')
for (let i = 0; i < delbtns.length; i++) {
    delbtns[i].addEventListener('click', () => {
        let taskId = i;
      tasks.splice(taskId, 1);
      localStorage.setItem('tasks', JSON.stringify(tasks));
      showtasks();
    });
  }

Answer 1

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

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

Измененный код будет выглядеть так:

 let tasks = JSON.parse(localStorage.getItem('tasks')) || []; 
let taskinput = document.getElementById('taskinput') 
let addbtn = document.getElementById('addBtn') 
let tasksblock = document.getElementById('tasks') 
 
showtasks() 
 
addbtn.addEventListener('click', ()=>{ 
    let task = { 
        text: taskinput.value 
    } 
    tasks.push(task) 
    localStorage.setItem('tasks',JSON.stringify(tasks)) 
    showtasks() 
    taskinput.value = '' 
}) 
 
function showtasks(){ 
    tasksblock.innerHTML = '' 
    for(let i=0;i    { 
        tasksblock.innerHTML = tasksblock.innerHTML+` 
        №${i+1}: ${tasks[i].text}   
 
        ` 
    } 
    let delbtns = document.querySelectorAll('.delbtn') 
    for (let i = 0; i < delbtns.length; i++) { 
        delbtns[i].addEventListener('click', () => { 
            let taskId = i; 
            tasks.splice(taskId, 1); 
            localStorage.setItem('tasks', JSON.stringify(tasks)); 
            showtasks(); 
        }); 
    } 
}