Javascript 通过按钮添加元素后，为什么单击列表项不会更改标题？

我有一个简单的应用程序。有一个列表，单击列表中的项目将更新标题以匹配列表项目的文本。还有一个按钮可将新项目添加到列表中

这是我的密码

var计数器=1；
var MyList=document.querySelector（“#MyList”）；//mylist是ul的id
var heading=document.querySelector（“#heading”）；//标题是标题的id
var btn=document.querySelector（“.btn”）；
var list=document.queryselectoral（“mylist li”）；
对于（i=0；i新事物”+计数器+””；
计数器++；
}

Hii，布山新增

布山达格
维沙尔安泊酒店
拉维考瑟尔
马尼克·贾达夫

之所以会发生这种情况，是因为您只需添加一次

eventListener，每次添加一个时都必须将其添加到新项目中

如果我是您而不是使用
innerHTML
，我会使用
createElement
，然后将您的新元素附加到列表中。这样做的另一个好处是，您可以在创建新的
li
时将eventListener添加到新的
li

在文档中，使用
document.createElement（）方法创建由
标记名
指定的HTML元素，或者不识别if
标记名

这是代码，唯一的更改是在
addRecord
函数中


var计数器=1；
var MyList=document.querySelector（“#MyList”）；//mylist是ul的id
var heading=document.querySelector（“#heading”）；//标题是标题的id
var btn=document.querySelector（“.btn”）；
var list=document.queryselectoral（“mylist li”）；
对于（i=0；i

Hii，布山新增

布山达格
维沙尔安泊酒店
拉维考瑟尔
马尼克·贾达夫
我对您的代码做了一个简单的更改，可能会对您有所帮助
var计数器=1；
var MyList=document.querySelector（“#MyList”）；//mylist是ul的id
var heading=document.querySelector（“#heading”）；//标题是标题的id
var btn=document.querySelector（“.btn”）；
var list=document.queryselectoral（“mylist li”）；
MyList.onclick=函数（e）{
heading.innerHTML=e.target.innerHTML；
}
btn.addEventListener（“单击”，添加记录）；
函数addRecord（）{
MyList.innerHTML+=“
新事物”+计数器+”
”；
计数器++；
}
Hii，布山新增

布山达格
维沙尔安泊酒店
拉维考瑟尔
马尼克·贾达夫
这可能对您有用。我删除了创建li元素而不是更改myList innerHtml的不必要的函数。另外，在创建新li时，会向其添加事件侦听器

    let counter = 1;

    myList.forEach(function(element) {
        addListener(element);
      });


    function addListener(element) {
        element.addEventListener("click", function() {
            heading.innerHTML = element.innerHTML;
        });
    }

    btn.addEventListener("click", function() {
        let newLi = document.createElement("LI");
        newLi.innerHTML= "Something New" + counter;
        addListener(newLi);
        counter ++;

        MyList.appendChild(newLi);
    });

提供一个我想你需要再次阅读我的第一条评论的链接…我想当你添加一个新的
li
时，你应该再次运行for循环，因为该事件不再附加到新的
li
（我猜出于某种原因也会附加到旧的
li
），你能解释一下e.target部分吗？在这种情况下，e是你的事件
onclick
，
e.target
将返回触发事件的元素，在本例中，当我绑定
上的单击事件时，它的
将从mylist返回该元素，一旦获得该元素，就可以使用innerHTML获取其文本