how to toggle DOM elements in a TO DO LIST-CodePudding

I'm trying to toggle all the elements "li" from my list using the ''Done'' button but the code I've created is working just for the first li. Could you please help me understanding what code I should use in JS to add the toggle option for all the li's ? Thank you in advance for your help.

HTML:

<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="Enter Items">
    <button id="enter">Enter!</button>
    <ul>
        <div class = "check">
        <li>Notebook</li>
        <button id="firstli" >Done</button>
    </div>
        <div class = "check">
        <li>Jello</li>
        <button class ="checkbutton">Done</button>
    </div>
        <div class = "check">
        <li>Spinach</li>
        <button class ="checkbutton">Done</button>
    </div>
        <div class = "check">
        <li>Rice</li>
        <button class ="checkbutton">Done</button>
    </div>
        <div class = "check">
        <li>Cake</li>
        <button class ="checkbutton">Done</button>
    </div>
        <div class = "check">
        <li>Candles</li>
        <button class ="checkbutton">Done</button>
    </div>

    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

JavaScript:

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.querySelector("li");
var div = document.querySelector("div");

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value="";
}

function doneTask () {
    for (let i = 0; i < div.children.length; i  ) {
    return document.querySelector(div.children[i].tagName).classList.toggle("done");}
 }


function addListAfterClick() {
    if(inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress (event) {
    if(inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

button.addEventListener("click",addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
div.addEventListener("click", doneTask);

Thank you in advance for your help.

CodePudding user response：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var lis = document.querySelectorAll("li");

function inputLength() {
  return input.value.length;
}

function createListElement() {
  var li = document.createElement("li");
  li.textContent = input.value;
  var btn = document.createElement("button");
  btn.textContent = 'Done';
  btn.classList.add("checkbutton");
  btn.addEventListener("click", () => doneTask(ul.children.length - 1));
  li.appendChild(btn);
  ul.appendChild(li);
  input.value = "";
}

function doneTask(index) {
  document.querySelectorAll("li")[index].classList.toggle("done");
}

function addListAfterClick() {
  if (inputLength() > 0) {
    createListElement();
  }
}

function addListAfterKeypress(event) {
  if (inputLength() > 0 && event.keyCode === 13) {
    createListElement();
  }
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

var buttons = document.querySelectorAll("ul button");
Array.from(buttons).forEach((btn, i) =>
  btn.addEventListener("click", () => doneTask(i))
);

<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="Enter Items">
<button id="enter">Enter!</button>
<ul>
  <div >
    <li>Notebook</li>
    <button id="firstli" >Done</button>
  </div>
  <div >
    <li>Jello</li>
    <button >Done</button>
  </div>
  <div >
    <li>Spinach</li>
    <button >Done</button>
  </div>
  <div >
    <li>Rice</li>
    <button >Done</button>
  </div>
  <div >
    <li>Cake</li>
    <button >Done</button>
  </div>
  <div >
    <li>Candles</li>
    <button >Done</button>
  </div>

</ul>