javascript - 使用 Javascript，获取被点击的特定 的文本

Question

我有一个在单击按钮时生成 Li 元素的输入:

HTML

<input type="text" id="input"></input>
<button id="submit" type="submit"> Submit </button>

  <ul id ="list">

  </ul>

JS

var submit = document.getElementById("submit");
var input = document.getElementById("input");

submit.addEventListener("click", function(){
  var listUl = document.getElementById("list");
  var listLi = document.createElement("li");
  var value = input.value;
  listUl.appendChild(listLi)
  listLi.textContent = value;
  gettingThisLi();
});

这非常简单，当单击提交按钮时，它会创建一个 li，将其附加到 ul 并为其提供输入值。在这个函数的末尾，我调用了另一个函数，因为我试图弄清楚如何在单击它时“获取”那个特定的 li。例如，如何获取它的文本，或者如何获取它以便我可以在单击它时穿过它，等等...

到目前为止我已经有了这个，但每次我点击一个 li 时，整个列表都会被打印出来。

function gettingThisLi(){
  var lis = document.querySelectorAll("li")
  for (var i = 0; i < lis.length; i++){
  var listElement = lis[i];
  listElement.addEventListener("click", function(){
  console.log(listElement)
  })}
  }

Answer 1

这是因为您在 li 上添加了两次相同的事件。

说明:添加第一个 li 时，会向其添加点击事件。现在，当添加下一个 li 并再次迭代列表时。点击事件再次附加到第一个 li 上。这就是为什么在第一次点击时它会打印 2 个元素，但在第二个元素上仍然是一个。如果你继续添加 li ，点击事件将再次附加到所有以前的 li 。

试试这个。

var submit = document.getElementById("submit");
var input = document.getElementById("input");

submit.addEventListener("click", function(){
  var listUl = document.getElementById("list");
  var listLi = document.createElement("li");
  var value = input.value;
  listUl.appendChild(listLi)
  listLi.textContent = value;
  gettingThisLi();
});

var print = function(){
  console.log(this.innerHTML)
  };



function gettingThisLi(){
  var lis = document.querySelectorAll("li");


  for (var i = 0; i < lis.length; i++){
   var listElement = lis[i];
   listElement.removeEventListener("click",print);
   listElement.addEventListener("click",print);
 }
  
  
  
  
}

<input type="text" id="input"></input>
<button id="submit" type="submit"> Submit </button>

  <ul id ="list">

  </ul>