How to change background colours of buttons on click

Question

I am a beginner and want to know how do I change the background colours of all the buttons on click?

var buttons = document.querySelectorAll(".btn").length;

for (var i = 0; i < buttons; i++) {
  document.querySelectorAll(".btn")[i].addEventListener("click", function () {
    document.querySelectorAll(".btn").style.backgroundColor = "red";
  });
}

<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>

Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Sep 25 '21 at 16:26

Spectric · Accepted Answer · 2021-09-25T16:30:27.337

querySelectorAll returns a NodeList. You have to iterate through it and apply the style to each item:

var buttons = document.querySelectorAll(".btn").length;

for (var i = 0; i < buttons; i++) {
  document.querySelectorAll(".btn")[i].addEventListener("click", function (e) {
    document.querySelectorAll(".btn").forEach(e => e.style.backgroundColor = "red")
  });
}

<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>

How to change background colours of buttons on click

1 Answers1