我正在研究人們在第一次學習JavaScript時遇到的經典購物清單問題。因此，我可以很好地將新元素添加到列表中，但是當我嘗試使用刪除按鈕刪除這些項目時，這些項目將不會被刪除。切換按鈕也不起作用。有人可以幫忙嗎？這是我的代碼：<!DOCTYPE html><html><head> <title>Javascript + DOM</title> <link rel="stylesheet" type="text/css" href="style.css"></head><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> <li> Notebook <button class="Delete">Delete!</button></li> <li>Jello <button class="Delete">Delete!</button></li> <li>Spinach <button class="Delete">Delete!</button></li> <li>Rice <button class="Delete"> Delete!</button></li> <li>Birthday Cake <button class="Delete"> Delete!</button></li> <li>Candles <button class="Delete"> Delete!</button></li> </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.querySelectorAll("li");var deleteButtons = document.getElementsByClassName("Delete");function inputLength() { return input.value.length;}function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); var button = document.createElement("button"); button.appendChild(document.createTextNode("Delete!")); button.classList.add("Delete") li.appendChild(button);}function addListAfterClick() { if (inputLength() > 0) { createListElement(); }}function addListAfterKeypress(event) { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); }}button.addEventListener("click", addListAfterClick);input.addEventListener("keypress", addListAfterKeypress);for(var i=0; i<li.length; i++){ li[i].addEventListener("click", liClick);}function liClick(){ this.classList.toggle("done");}
添加新元素時添加功能按鈕
慕姐8265434
2022-09-23 21:58:16
