如何切换待办事项列表中的 DOM 个元素

Question

我正在尝试使用“'Done'”按钮切换列表中的所有元素“li”，但我创建的代码仅适用于第一个 li。你能帮我理解我应该在 JS 中使用什么代码来为所有 li 添加切换选项吗？预先感谢您的帮助。

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);

预先感谢您的帮助。

Answer 1

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 class="check">
    <li>Notebook</li>
    <button id="firstli" class="checkbutton">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>

如何切换待办事项列表中的 DOM 个元素

how to toggle DOM elements in a TO DO LIST

javascript

dom

toggle