如何在TODOLIST中切換DOM元素-有解無憂

我正在嘗試使用“完成”按鈕從串列中切換所有元素“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);

預先感謝您的幫助。

uj5u.com熱心網友回復：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406408.html

標籤：

上一篇：一段應該無法找到DOM元素的代碼。為什么有些口譯員還是能找到？

下一篇：簡單的DOM專案