JavaScript点击多个div修改背景色代码不生效如何解决

• DOM元素获取逻辑错误：HTML规范中id是页面唯一标识符，你给3个div都设置了相同的id="main"，调用document.getElementById("main")只会返回匹配到的第一个div元素，返回值不是类数组集合，直接访问a.length会得到undefined，for循环根本不会执行。
• 循环变量作用域异常：原代码循环中i没有声明关键字，属于全局变量；就算修复了元素获取的问题，等循环执行完成后i的值会等于元素总长度（比如3个div的话i=3），点击事件触发时访问a[i]会拿到undefined，调用style属性直接报错。
• 事件回调取值逻辑冗余：点击事件触发时，回调函数内部的this默认直接指向当前触发点击的DOM元素，不需要通过索引从集合中查找对应元素。

HTML部分 #

<div class="main"></div>
<div class="main"></div>
<div class="main"></div>

把重复的id替换为共用的class属性，用于批量选中同组元素

CSS部分 #

div{
  width: 100px; 
  height: 100px; 
  border: 1px solid red; 
  margin: 10px;
}

JavaScript部分 #

function abc(){
  // 批量获取所有class为main的div元素
  const divList = document.getElementsByClassName("main");
  // 用let声明循环变量，生成块级作用域避免变量污染
  for(let i = 0; i < divList.length; i++){
    divList[i].onclick = function(){
      // 直接通过this拿到当前点击的元素，修改背景色
      this.style.backgroundColor = "red";
    }
  }
}
abc();

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