为了账号安全,请及时绑定邮箱和手机立即绑定

添加新元素时添加功能按钮

添加新元素时添加功能按钮

慕姐8265434 2022-09-23 21:58:16

我正在研究人们在第一次学习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贡献1542条经验 获得超4个赞

创建动态内容的问题是,当您添加元素时,此元素是裸的,这意味着没有任何事件侦听器。您在代码中添加的事件侦听器是现有按钮,不会传递到新按钮,您需要再次绑定新按钮。更一般地说,事件侦听器绑定到特定的元素,而不是像按钮这样的一般想法。您的解决方案非常简单,只需在元素创建后再次运行绑定即可。希望我帮助


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信