Todolist not working propoerly

#1

This is a TodoApp i made but it is not working properly.
My thought for this was
I will create a li element and append 3 buttons in it
For deletion, for upward move , for downward move
Now whenever i add the list it adds the button in the list but as soon as i add another todo the buttons in the previous list gets deleted
To overcome this problem i changed the location of initialising button 1,2,3 and defining it inside the createTodo function but then i am not able to call btn1.addEventlistner

#2

Hi @amanmahajan987,
In the Js file, you create a li inside the Create_And_AddTodo function so that each time a new item is added a new list item is created but the buttons you are creating that is the remove and shifting buttons they are outside the Create_And_AddTodo function therefore each time a new list item is made the buttons wont be created again hence they disappear whenever a new list item is created.
Therefore, to overcome this problem create the buttons inside the Create_And_AddTodo function to avoid such error.
I have attached the corrected code of the Js file below for your reference :

const btn = document.getElementById("btn");
const inp = document.getElementById("input");
const list = document.getElementById("list");

function Create_And_AddTodo(todoText) {
  const li = document.createElement("li");
  li.innerHTML = todoText + " ";

  const btn1 = document.createElement("button");
  const btn2 = document.createElement("button");
  const btn3 = document.createElement("button");
  btn1.innerHTML = "X";
  btn1.style.borderRadius = "60%";
  btn2.innerHTML = "↑";
  btn2.style.borderRadius = "60%";
  btn3.innerHTML = "↓";
  btn3.style.borderRadius = "60%";

  li.append(btn1);
  li.append(btn2);
  li.append(btn3);

  list.append(li);
}

btn.addEventListener("click", function () {
  const todoText = inp.value;
  Create_And_AddTodo(todoText);
  input.value = "";
});

btn1.addEventListener("click", function () {
  const parent = btn1.parentElement;
  parent.remove();
});

btn2.addEventListener("click", function () {
  const parent = btn2.parentElement;
  const sibling = parent.previousElementSibling;
  console.log(parent.innerText);
  console.log(sibling);
});

btn3.addEventListener("click", function () {
  const parent = btn3.parentElement;
  const sibling = parent.nextElementSibling;
  console.log(sibling);
});

For more precise insight you can also refer the attached codepen link.

#3

I hope I’ve cleared your doubt. I ask you to please rate your experience here
Your feedback is very important. It helps us improve our platform and hence provide you
the learning experience you deserve.

On the off chance, you still have some questions or not find the answers satisfactory, you may reopen
the doubt.