javascript - 尝试向 LI 元素添加单击事件处理程序并获取警报框中的内容

Question

我正在尝试将单击事件处理程序添加到 LI 元素并在警报框中获取其内容。只有元素的第一个内容被提取到警报框中。你能帮我获取点击事件中每个元素的文本吗？

document.querySelectorAll("ul")[1].onclick = function(){
    alert(this.innerText);
}

<div class="container">    
  <ul class="item-container">
    <li><a class="items" href="#">Item 1</a></li>
    <li><a class="items" href="#">Item 2</a></li>
    <li><a class="items" href="#">Item 3</a></li>
    <li><a class="items" href="#">Item 4</a></li>
    <li><a class="items" href="#">Item 5</a></li>
    <li><a class="items" href="#">Item 6</a></li>
   </ul>
</div>

标签： javascripthtmladdeventlistener

Answer 1

您可能希望为每个li元素添加一个单击事件，而不是ul.

这是一个例子：

[...document.querySelectorAll("li")].forEach(li => li.onclick = function(){
    alert(this.innerText);
});

<div class="container">
	<ul class="item-container">
		<li><a class="items" href="#">Item 1</a></li>
		<li><a class="items" href="#">Item 2</a></li>
		<li><a class="items" href="#">Item 3</a></li>
		<li><a class="items" href="#">Item 4</a></li>
		<li><a class="items" href="#">Item 5</a></li>
		<li><a class="items" href="#">Item 6</a></li>
	</ul>
</div>