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时，会向其中添加click事件。现在，当添加下一个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>

Answer 2

我建议使用委托并在ul元素中捕获事件，然后您可以获取触发事件及其文本的li元素。

var submit = document.getElementById("submit");
var input = document.getElementById("input");
var listUl = document.getElementById("list");

submit.addEventListener("click", function(){
  var listLi = document.createElement("li");
  var value = input.value;
  listUl.appendChild(listLi)
  listLi.textContent = value;
});

listUl.addEventListener("click", function(event){
  var target = event.target || event.srcElement;
  console.log(target.innerText);
});

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

Answer 3

在点击事件中使用this选择器。以下示例打印单击列表项的内部文本

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;
  listLi.onclick = gettingThisLi;
});


function gettingThisLi(){
    console.log(this.innerText)
}

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

Answer 4

这是我的解决方案： 例如，我有一个HTML项目列表，当单击任何一项时，都会在 h4 标签上显示它。

   <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
         <li>Item 4</li>
     </ul>
     <h4></h4>

然后在Js中使用带有事件侦听器的回调函数，将单击特定的元素。

  const allItems= document.querySelectorAll('li');
  const display= document.querySelector('h4');
  allItems.forEach(item=>{

item.addEventListener('click', (event)=>{
   display.innerText=event.target.textContent;
});

}）;

Answer 5

不需要此函数GettingThisLi（）

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;
  listLi.addEventListener("click",print);
});

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

使用Javascript，获取被点击的特定<li>的文本

5 个答案: