笔记背景：

这是我参与「第五届青训营」伴学笔记创作活动的第 12 天，青训营学习的过程中，我们上完老师的课应当多练习，多去思考，以巩固学习成果，尤其是JS是前端的重要基础，需要花费很大精力学习。我在学习原生JS时练习了一个小案例，即通过JS操纵dom达到切换图片的效果，而我在这次小练习中遇到了一个新手很容易犯的问题。

问题描述：

浏览器控制台报错
Uncaught TypeError: Cannot set properties of undefined (setting ‘onclick’) at

当时的代码背景是这样的

  <body>
    <div class="bigbox">
      <img src="../素材/箴言1副本.jpg" alt="" />
      <img src="../素材/箴言2副本.jpg" alt="" />
      <img src="../素材/箴言3副本.jpg" alt="" />
      <img src="../素材/箴言4副本.jpg" alt="" />
    </div>
  </body>
  <script>
    var pics = document.querySelector('.bigbox').querySelectorAll('img');
    for (var i = 1; i < pics.length+1 ; i++) {
      pics[i].onclick = function() {
        console.log(this.src);
      }
    }
  </script>

错误分析：

这种错误有可能发生在以下几种情况：

1.JS代码写在HTML元素之前执行了，获取不到元素

解决方法：将JS代码或引入的JS文件放到最底部

2.querySelector()或getElementById()选择时出错

解决方法：检查看看是否写错，比如：拼写错误、class要加，id加#之类

3.数组下标越界

解决方法：确认数组下标是否越界，若越界修改代码的下标在该数组界限内

4.具体到该代码错误

这个错误是说变量的值是 undefined，无法设置onclick事件。具体到案例素材只有4个，而获取元素时循环从1开始，第4个元素不存在，onclick无法绑定，于是报错。这个问题就是错误分析中提到的数组越界，这个问题新手同学很容易犯，比如数组下标只有0到5存放了元素，当i=6时下标越界, arr[i]的值就是undefined，arr[i].onclick 也就成了undefined.onclick，而该元素自然显示undefined，意思该元素还没有定义。

练习原生JS | 青训营笔记

笔记背景：

问题描述：

错误分析：