A better/shorter way to write an Array /class

Question

I`m trying to disabled 6 buttons when a condition is met. I have given the buttons the same class. Is there a simplest/shorter way to write ;

var ButtonCollection = document.getElementsByClassName("button");
function PopUp() {
      x = L + Y;
      
      var Count = 0;
      MonsterDiv2.addEventListener("click", function () {
        Count += 1;
        if (Count == 2) MonsterDiv2.style.display = "none";
        ActionList.innerHTML += `<li>.</li>`;
        ButtonCollection[0].disabled = false;
        ButtonCollection[1].disabled = false;
        ButtonCollection[2].disabled = false;
        ButtonCollection[3].disabled = false;
        ButtonCollection[4].disabled = false;
        ButtonCollection[5].disabled = false;
        //
      });
    }

Why not loop over your `ButtonCollection`? It'll work regardless of how many elements it contains. — mykaf, Oct 20 '22 at 17:50
Does this answer your question? [For loop for HTMLCollection elements](https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements) — pilchard, Oct 20 '22 at 17:54
You should probably be querying within the listener unless you're sure the collection won't change. Also, are you intending everything after `if (Count == 2)` to be in the condition? If so you'll need to enclose it all in a block. — pilchard, Oct 20 '22 at 17:55
You tagged `jquery` so you can use `$(".button:lt(6)").prop("disabled", false)` — Mohammad, Oct 20 '22 at 17:55

score 1 · Answer 1 · answered Oct 20 '22 at 18:03

I guess the first thing you could do is refactoring the ButtonCollection[<index>].disabled = false;

You could do so by writing the following code:

Array.from(ButtonCollection).forEach(el => {el.disabled = false})

Note that you have to convert HTMLCollection to array before using the forEach method

score 0 · Answer 2 · edited Oct 23 '22 at 09:46

0

Hopefully, this is what you are looking for. Also maybe I would suggest replacing the enableButtons() function with toggleButtons(), it will be more universal.
And don't forget to clean the EventListener :)

const buttonsCollection = document.getElementsByClassName("button");
const enableButtons = () => {
  buttonsCollection.forEach((button) => {
    button.disabled = false
  })
}
const popUp = () => {
  x = L + Y;
  
  let count = 0;
  monsterDiv2.addEventListener("click", () => {
    count += 1;

    if (count === 2) monsterDiv2.style.display = "none";

    enableButtons()
  });
}

edited Oct 23 '22 at 09:46

Tyler2P

2,324
26
22
31

answered Oct 20 '22 at 18:03

Andrii H

1

As far as I know, the HTML Collection object does not support the `forEach` method. Have you tested this code? – YSLdev Oct 20 '22 at 18:05
1

Oh, really my fault, I haven't worked with HTML collection for a long time, thanks for noticing, I think the spread operator should fix this situation, there you go: const buttonsCollection = [...document.getElementsByClassName("button")]; Or Array.from() is an option, as you described in your answer – Andrii H Oct 20 '22 at 18:35

A better/shorter way to write an Array /class

2 Answers2