如何遍历无序列表以获取 LI 元素的 innerText 的 console.log答案

【问题标题】：How to Iterate through an Unordered List to get a console.log of the innerText of the LI element如何遍历无序列表以获取 LI 元素的 innerText 的 console.log
【发布时间】：2019-07-10 20:09:21
【问题描述】：

我需要创建一个事件侦听器，当用户单击 HTML 中的列表项之一时触发。该操作应调用名为 listItemText 的函数，该函数返回被单击的列表项的 innerText——即：如果他们点击第一个 li 它应该记录“Walk the dog”

我已经尝试了所有我能想到的方法来获取被点击的 li 项目的正确对应的 innerText。充其量，我已经在 console.log 中获得了整个列表，或者列表的最后一个元素。

在这一点上我已经尝试了很多事情，以至于无法回忆起来。下面的代码或多或少是我尝试过的代码的变体

  <ul id="todo-app">
      <li class="item">Walk the dog</li>
      <li class="item">Pay bills</li>
      <li class="item">Make dinner</li>
      <li class="item">Code for one hour</li>
  </ul>

var targetUl = document.getElementById('todo-app').childNodes;

this.addEventListener('click', listItemText);

function listItemText(event) {
  var liClicked = event.target;

  for (i=0; i<targetUl.length; i++) {
    if (liClicked == 'LI') {
      console.log(targetUl[i].innerText)
    }
  } 
}

我希望获得 li 标签的文本内容，但此时我一直未定义。非常感谢您的帮助。

【问题讨论】：

标签： javascript html addeventlistener innertext

【解决方案1】：

如果我理解正确，您想要您单击的li 元素的文本的console.log，所以我想您可以尝试以下代码：

var targetUl = document.getElementById('todo-app').addEventListener("click",listItemText);

function listItemText(event) {
  var liClicked = event.target;
  if(liClicked && liClicked.nodeName == "LI"){
    console.log(liClicked.textContent)
  }
}

<ul id="todo-app">
      <li class="item">Walk the dog</li>
      <li class="item">Pay bills</li>
      <li class="item">Make dinner</li>
      <li class="item">Code for one hour</li>
</ul>

这是事件委托的原则，您不需要将事件侦听器附加到所有元素上，而只需附加到父节点，如果事件发生，它将冒泡到父节点并使用event.target 你可以获得被点击的子元素的引用。

【讨论】：

【解决方案2】：

我刚刚才弄明白了。做的略有不同，但最终的想法相同。很难理解 event.target 及其工作原理。这是我的答案——和你的答案几乎一样，好先生：

var toDoList = document.getElementById("todo-app");
toDoList.addEventListener('click', listItemText);

function listItemText(e) {
  console.log(e.target.innerText);
  return e.target.innerText;
}

【讨论】：