How to manipulate multiple element's styles with a single event listener?

Question

This is probably very simple, but I cannot make it work. I have 2 headings with the same class

<h1 class="heading-title">Hyperspace</h1>
<h1 class="heading-title">Hyperspace</h1>

I also have a button that I want to change both the headings color when I click it

const customColor1Btn = document.querySelector(".custom-color-1");
const headings = document.querySelectorAll(".heading-title");

customColor1Btn.addEventListener("click", function () {
  headings.style.color = "red";
});

It works when I change the color of just 1 heading, but I can never make an event listener work with more than 1 element. I need 1 button click to manipulate multiple element's styles.

How can I make it work?

score 1 · Answer 1 · answered Jun 15 '22 at 14:56

Document.querySelectorAll returns a NodeList

So, you need to loop over all the headings in the headings NodeList and change the color for the individual heading nodes.

const customColor1Btn = document.querySelector(".custom-color-1");
const headings = document.querySelectorAll(".heading-title");

customColor1Btn.addEventListener("click", function () {
  headings.forEach(h => h.style.color = "red");
});

<h1 class="heading-title">Hyperspace</h1>
<h1 class="heading-title">Hyperspace</h1>
<button class="custom-color-1">Change color</button>

How to manipulate multiple element's styles with a single event listener?

1 Answers1