Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

making to do application with JS but EventListener is not working after i press submit (still new to JS)

I am trying to make To-do application with JS everything works fine but i can’t delete after pressing submit and i don’t understand why , if anyone can help me would be greatful

Here is a Code in
code

your text

I Have checked the code but couldn’t figure it out So please Help!

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Well this might fix the code.

This is mostly the code posted in the pen.

let task = document.getElementsByClassName("taskName")[0];
let sub =  document.querySelector("#sub");
let ls = document.getElementsByClassName("ls")[0];
let dels = document.querySelectorAll(".submmit");
let tasks = [];

if (window.localStorage.task){

  tasks = JSON.parse(window.localStorage.task);

  ls.innerHTML = ``;
  for(let i = 0 ; i < tasks.length ; i++){
    let ele = document.createElement("div");
    let del = document.createElement("div");
    del.innerHTML = `Delete`;
    del.className = `submmit`
    ele.innerHTML = tasks[i];
    ele.className = 'task';
    ls.appendChild(ele)
    ls.appendChild(del)
    del.addEventListener("click",delEle); 
  }

}




sub.addEventListener("click",store) ; 

function store(){
  tasks.push(task.value)
  window.localStorage.setItem("task",JSON.stringify(tasks))
  let currTasks = JSON.parse(window.localStorage.task);

  ls.innerHTML = ``;

  for(let i = 0 ; i < currTasks.length ; i++){
    let ele = document.createElement("div");
    let del = document.createElement("div");
    del.innerHTML = `Delete`;
    del.className = `submmit`
    ele.innerHTML = currTasks[i];
    ele.className = 'task';
    ls.appendChild(ele)
    ls.appendChild(del)
    del.addEventListener("click",delEle); 
  }

}



function delEle(e){
  for(let i = 0 ; i < tasks.length ; i++){
    if(e.currentTarget.previousElementSibling.innerHTML === tasks[i]){
      
      tasks.splice(i, 1); 
      console.log(tasks)
      break;
    }
  }
  ls.removeChild(e.currentTarget.previousElementSibling)
  ls.removeChild(e.currentTarget)
  window.localStorage.setItem("task",JSON.stringify(tasks))
  
}

One simple thing that can be fixed to remove duplications.

Create a function to create To-Dos.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading