How can I change the background color of multiple elements at once using an onclick event listener?

Question

Below is my current code. It will create a grid of squares that change to a random color when you mouseover. I am trying to make an event listener for a click on the first square, and when it is clicked it resets all the squares in the grid back to the original color. I'm not sure what I am doing wrong, I am pretty new to Javascript, but I believe it could have something to do with my syntax in the resetAllSquares function.

"use strict";

let squares = document.querySelectorAll('div');

/*Mouseover change to random color*/
squares.forEach(item => item.addEventListener('mouseover', (e) => {
    changeColor(item);
}))

const changeColor = (item) => {
    item.style.background = "#" + Math.floor(Math.random() * 16777215).toString(16);
}

/* Reset current square */
squares.forEach(item => item.addEventListener('click', (e) => {
    resetSquare(item);
}))

const resetSquare = (item) => {
    item.style.background = "#737373";
}

/* Reset all squares */
document.getElementById('first').addEventListener('click', () => {
    resetAllSquares();
})

const resetAllSquares = () => {
    squares.style.background = "#737373";
}

.square {
    background-color: #737373;
    float: left;
    position: relative;
    width: 10%;
    padding-bottom: 10%;
    margin: 1%;
}

<div class="square" id="first"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

Clicking on the first square produces a `TypeError: squares.style is undefined` error message on the console. Always good to check for errors first :) — traktor, Mar 21 '21 at 23:34

score 1 · Answer 1 · answered Mar 21 '21 at 23:21

you have to loop through the squares to set their background :

squares.forEach(square => { square.style.background = "#737373" });

let squares = document.querySelectorAll('div');

/*Mouseover change to random color*/
squares.forEach(item => item.addEventListener('mouseover', (e) => {
  changeColor(item);
}))

const changeColor = (item) => {
  item.style.background = "#" + Math.floor(Math.random() * 16777215).toString(16);
}

/* Reset current square */
squares.forEach(item => item.addEventListener('click', (e) => {
  resetSquare(item);
}))

const resetSquare = (item) => {
  item.style.background = "#737373";
}

/* Reset all squares */
document.getElementById('first').addEventListener('click', () => {
  resetAllSquares();
})

const resetAllSquares = () => {
  squares.forEach(square => { square.style.background = "#737373" });
}

.square {
  background-color: #737373;
  float: left;
  position: relative;
  width: 10%;
  padding-bottom: 10%;
  margin: 1%;
}

<div class="square" id="first"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

score 1 · Accepted Answer · answered Mar 21 '21 at 23:22

Because squares is still an array that you've been looping over to change the color in the other instances, you need to loop over squares again to change them back.

const resetAllSquares = () => {
    squares.forEach(item => item.style.background = "#737373";)
 }

How can I change the background color of multiple elements at once using an onclick event listener?

2 Answers2