我正在研究人们在第一次学习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");}
1 回答
慕勒3428872
TA贡献1848条经验 获得超6个赞
创建动态内容的问题是，当您添加元素时，此元素是裸的，这意味着没有任何事件侦听器。您在代码中添加的事件侦听器是现有按钮，不会传递到新按钮，您需要再次绑定新按钮。更一般地说，事件侦听器绑定到特定的元素，而不是像按钮这样的一般想法。您的解决方案非常简单，只需在元素创建后再次运行绑定即可。希望我帮助
添加回答
举报
0/150
提交
取消