Change background color on click with using class

Question

This is my code:

function black() {
document.querySelectorAll(".object").style.backgroundColor = "black";
}

function red() {
document.querySelectorAll(".object").style.backgroundColor = "red";
}

function blue() {
document.querySelectorAll(".object").style.backgroundColor = "blue";
}

.object {
width: 200px;
height: 200px;
background-color: black;
margin: 20px;
}

<button id="button_black" class="color_change" onclick="black()" value="black">Black</button>
<button id="button_red" class="color_change" onclick="red()" value="red">Red</button>
<button id="button_blue" class="color_change" onclick="blue()" value="blue">Blue</button>


<div class="object"></div>
<div class="object"></div>

Unfortunately, it does not work. If I change »document.querySelectorAll« to »document.querySelector« and use an ID instead, it works for one object. But I need it as class. How is it possible to fix that?

Thaaanks.

Answer 1

Your issue is that document.querySelectorAll returns a NodeList, and you need to iterate over the values in it, changing the background for each one:

function black() {
document.querySelectorAll(".object").forEach(v => v.style.backgroundColor = "black");
}

function red() {
document.querySelectorAll(".object").forEach(v => v.style.backgroundColor = "red");
}

function blue() {
document.querySelectorAll(".object").forEach(v => v.style.backgroundColor = "blue");
}

.object {
width: 200px;
height: 200px;
background-color: black;
margin: 20px;
}

<button id="button_black" class="color_change" onclick="black()" value="black">Black</button>
<button id="button_red" class="color_change" onclick="red()" value="red">Red</button>
<button id="button_blue" class="color_change" onclick="blue()" value="blue">Blue</button>


<div class="object"></div>
<div class="object"></div>