For loop through different IDs with JS?

Question

So I have 30 buttons (id="button1" to "button30"):

<button type="button" class="buttons" id="button1">1</button>

and I set up some JS so that the button changes colors on every click:

        let index = 0;
        const colors = ['green', 'red', '#405cf5'];

        let btn = document.querySelector('#button1');
        document.querySelector('#button1').addEventListener('click', function(){
            btn.style.backgroundColor = colors[index];

            index = index >= colors.length - 1 ? 0 : index + 1;
        })

I'm not sure how to set this up so that all my buttons do this without copy and pasting and manually typing out the ID each time.

.querySelectorAll() + a property they all have in common (e.g. they are buttons, the class buttons, the id starts with button, ...) + this and data-* attributes. Also you might want to have a look at the modulus operator % — Andreas
– Andreas, Commented Aug 18, 2022 at 8:56
Should every button have its own "color cycle"? So first click on button1 -> green, second click on button1 -> red. What will be the color of button2 if we now click that for the first time? green or red? — Andreas
– Andreas, Commented Aug 18, 2022 at 9:01

mplungjan · Accepted Answer · 2022-08-18 12:29:52Z

Delegate, please.

Here I find the closest static container of the buttons (if no container use document) and any click inside the container is checked against the thing we want clicked - you can test against any valid selector.

let index = 0;
const colors = ['green', 'red', '#405cf5'];
document.getElementById("buttonContainer").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.matches("button.buttons")) {
    tgt.style.backgroundColor = colors[index++ % colors.length];
  }
})

<div id="buttonContainer">
  <button type="button" class="buttons" id="button1">1</button>
  <button type="button" class="buttons" id="button2">2</button>
  <button type="button" class="buttons" id="button3">3</button>
</div>

If there are other buttons not to be affected we can use a class

let index = 0;
const colors = ['green', 'red', '#405cf5'];
document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.matches("button.buttons")) {
    tgt.style.backgroundColor = colors[index++ % colors.length];
  }
})

  <button type="button" class="buttons" id="button1">1</button>
  <button type="button" class="buttons" id="button2">2</button>
  <button type="button" class="buttons" id="button3">3</button>

<button class="otherbutton">Dont color me</button>

Why do you make the assumption that there's a "closest static container" (that's not the document)? Imho it's unclear if there should be one index for all buttons or one index per button.
So if none we use document. And if a color per button, OP will tell and it is trivial to change. My code is still useful and likely complete
"if none use document" - Then this will act on every button. Might want to adjust the .matches() selector in that case.
I fail to understand your adversity against answers based on partial information. I have answered hundred of thousands of JS questions since 1997 and I am rarely misunderstanding or guessing poorly what the askers need

Collectives™ on Stack Overflow

For loop through different IDs with JS?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related