循环为li元素绑定EventHandler出现TypeError的问题求助

嘿，别慌，我来帮你搞定这个问题～

先揪出代码里的两个坑： #

1. 方法名拼写错啦 #

你写的getElementByTagName少了个s！正确的应该是getElementsByTagName——因为这个方法会返回一堆匹配的元素（HTML集合），所以是复数形式的Elements。拼写错的话，lis就会变成undefined，后续循环肯定出问题。

2. 箭头函数的小陷阱+文本获取方式不对 #

你用了箭头函数当点击事件处理函数，箭头函数的this不会指向你点击的那个<li>，而是跟着外部作用域走。另外，如果你直接尝试输出元素对象，就会触发那个“无法将对象转换为原始值”的错误——你要的是衬衫名称，也就是元素里的文本内容，不是元素本身呀！

修正后的完整代码 #

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

<script>
// 先把方法名改对
var lis = document.getElementById("list").getElementsByTagName('li');
for(var i = 0; i < lis.length; i ++){
  lis[i].onclick = (event) => {
    // 通过event.target拿到点击的元素，再用textContent取文本
    console.log(event.target.textContent.trim());
  }
}
</script>

额外小技巧 #

如果你不想用箭头函数，换成普通函数的话，this就会直接指向当前点击的<li>，代码可以写成这样：

lis[i].onclick = function() {
  console.log(this.textContent.trim());
}

这里的trim()是用来去掉文本前后可能藏着的空格，让输出更清爽，要是你确定文本没多余空格，也可以不用它～

内容的提问来源于stack exchange，提问作者Lkoprivica