Как выполнить итерацию по неупорядоченному списку, чтобы получить console.log innerText элемента LI - PullRequest
Новая
       24

Как выполнить итерацию по неупорядоченному списку, чтобы получить console.log innerText элемента LI

0 голосов
/ 17 февраля 2019

Мне нужно создать прослушиватель событий, который срабатывает, когда пользователь щелкает один из элементов списка в HTML. Действие должно вызывать функцию с именем listItemText, которая возвращает innerText элемента списка, по которому был выполнен щелчок, то есть: еслиони нажимают на первую кнопку li, которая должна показывать "Прогулка с собакой"

Я перепробовал все, что мог придумать, чтобы получить правильный соответствующий внутренний текст элемента li, по которому щелкают.В лучшем случае я получил либо весь список обратно в 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, но на этом этапе я продолжаю получать неопределенность.Помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Я только что понял это.Сделал это немного по-другому, но в конечном итоге та же идея.Трудно было понять event.target и как это работает.Вот мой ответ - который почти совпадает с вашим ответом, сэр: 

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

function listItemText(e) {
  console.log(e.target.innerText);
  return e.target.innerText;
}
0 голосов
/ 17 февраля 2019

Если я правильно понимаю, вы хотите console.log текста элемента li, который вы щелкнете, поэтому, я полагаю, вы можете попробовать следующий код: 

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, вы можете получить ссылку на дочерний элемент, по которому щелкнули.
...