Question

我需要在li元素中添加一个Event Handler，然后在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

你可以使用child而不是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); 
}

Answer 2

为每个li添加事件监听器并不好，好像有很多，你最终会有很多处理程序。您可以使用事件委派来解决问题。在元素上发生的每个事件都会向上传播给它的父母，以及Grand父母等等。因此，您只需在ul上添加一个事件侦听器，并检测点击发生在哪个li上，并按照明智的方式进行处理。这是一个例子：

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 3

循环浏览列表项，然后添加点击事件和innerText以获取衬衫。

＆＃13;

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

＆＃13;

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

＆＃13;

for循环与eventhandler

3 个答案: