для цикла с обработчиком событий

Question

Мне нужно добавить обработчик событий в элемент li, а затем console.log () имя выбранной ими рубашки. Я получаю typeError: Невозможно преобразовать объект в примитивное значение. Я новичок в этом и пытаюсь понять это.

  <h3>Shirts</h3>
    <ul id='list'>
     <li>Biker Jacket</li>
     <li>Mens Shirt</li>
    </ul>


var lis = document.getElementById("list").getElementByTagName('li'); 
  for(var i = 0; i < lis.length; i ++){
    lis[i].onclick = (event) => {

  }
    console.log(event); 

  }

Answer 1

Добавление прослушивателей событий для каждого li не очень хорошо, так как если их много, у вас будет много обработчиков. Вы можете использовать делегирование событий для решения проблемы. Каждое событие, которое происходит с элементом, распространяется наверх к его родителю, к Гранд-родителям и так далее. Таким образом, вы можете добавить только один прослушиватель событий на ul и определить, на каком из них произошел щелчок, и выполнить обработку, как мудрый. Вот пример:

document.getElementById("list").addEventListener("click", function(e) {
    // e.target is the clicked element!
    // If it was a list item
    if(e.target && e.target.nodeName == "LI") {
        // List item found!  Output the ID!
        console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
    }
});

Надеюсь, это поможет

Answer 2

Прокрутите элемент списка, затем добавьте событие щелчка и innerText, чтобы получить рубашку.

const lis = document.querySelectorAll('#list > li');
lis.forEach(function(list){
	list.onclick = () => {
		console.log(list.innerText)
	}; 
})

<h3>Shirts</h3>
<ul id='list'>
  <li>Biker Jacket</li>
  <li>Mens Shirt</li>
</ul>

Answer 3

Вы можете использовать дочерние элементы вместо getElementByTagName и перебирать их с помощью Array.from , это синтаксис es6. Array.from не будет работать в es5.

var lis = Array.from(document.getElementById("list").children);

for(var i = 0; i < lis.length; i ++){
    lis[i].onclick = (event) => {

    }
    console.log(event); 
}