Question

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

这是我的代码

var counter = 1;
var MyList = document.querySelector("#mylist"); // mylist is id of ul
var heading = document.querySelector("#heading"); // heading is id of header
var btn = document.querySelector(".btn");
var list = document.querySelectorAll("#mylist li");

for (i = 0; i < list.length; i++) {
  list[i].addEventListener("click", changeHead);
}

function changeHead() {
  heading.innerHTML = this.innerHTML;
}

btn.addEventListener("click", addRecord);

function addRecord() {
  MyList.innerHTML += "<li>something New " + counter + "</li>";
  counter++;
}

<h1 id="heading">Hii,Bhushan</h1> <button class="btn">Add New</button>
<ul id="mylist">
  <li>bhushan dhage</li>
  <li>vishal Ambhore</li>
  <li>Ravi kauthale</li>
  <li>manik jadhav</li>
</ul>

单击列表项似乎可以正常工作，但是当我添加一个新列表项并单击它时，标题不会更新。你知道为什么会这样吗？

谢谢。

Answer 1

之所以会发生这种情况，是因为您只添加了一次base::x，而每次添加时都必须将其添加到新项中。

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

在HTML文档中， li 方法创建由document.createElement()指定的HTML元素；如果{{1}，则创建HTMLUnknownElement }无法识别。

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

tagName

addRecord

如果有任何令人困惑的问题，我希望您能找到帮助。

Answer 2

我对您的代码做了简单的更改，可能会帮助您

var counter = 1;
var MyList = document.querySelector("#mylist"); // mylist is id of ul
var heading = document.querySelector("#heading"); // heading is id of header
var btn = document.querySelector(".btn");
var list = document.querySelectorAll("#mylist li");

MyList.onclick = function(e) {
  heading.innerHTML = e.target.innerHTML;
}

btn.addEventListener("click", addRecord);

function addRecord() {
  MyList.innerHTML += "<li>something New " + counter + "</li>";
  counter++;
}

<h1 id="heading">Hii,Bhushan</h1> <button class="btn">Add New</button>
<ul id="mylist">
  <li>bhushan dhage</li>
  <li>vishal Ambhore</li>
  <li>Ravi kauthale</li>
  <li>manik jadhav</li>
</ul>

Answer 3

这可能对您有用，我删除了不必要的函数，创建了一个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);
    });

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

3 个答案: