Unable to change background color of multiple div onclick using javascript

Unable to change background color of multiple div onclick using javascript. I used for loop but still not working. Unable to change background color of multiple div onclick using javascript. I used for loop but still not working. Unable to change background color of multiple div onclick using javascript. I used for loop but still not working.

function abc(){

var a = document.getElementById("main");

        for(i=0;i<a.length;i++){
            
            a[i].onclick= function(){
                
                a[i].style.backgroundColor="red";
                
            }
        }

    }
abc();
div{
        width: 100px; height: 100px; border: 1px solid red; margin: 10px;
    }
<div id="main">
    

</div>

<div id="main">
    

</div>

<div id="main">
    

    
</div>

>Solution :

IDs are unique. Use a class instead.

let boxes = document.getElementsByClassName("box");
for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("click", () => {
    event.target.classList.add("bg-red");
  })
}
.box{
  width:  100px; 
  height: 100px;
  border: 1px solid red; 
  margin: 10px;
}
.bg-red{
  background-color: red;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Leave a Reply