How does one add more than one variable to script for toggling visibility?

I Need Help
#1

How does one add more than one variable such as bloque01, bloque02, and bloque03 to script?

The below script works nicely for one variable (bloque01) to toggle its visibility, and it is invoked by clicking a button. I put “LT” in place of “<” and “GT” in place of “>” so the script is visible here in the forum (otherwise it disappears).

function myFunction() {
  document.getElementById("bloque01").style.display = "default";
}

Intuitively to add three variables, the code would be something like the following, but it appears to be bad syntax.

function myFunction() {
  document.getElementById("bloque01", "bloque02", "bloque03).style.display = "default";
}

Could someone please provide the correct syntax for the second example.

#2

Hi @Porblocs

I edited your post so the code shows. You can use [code] .... [/code] and I think there is also another way to do it.

But regarding your questions, use

querySelectorAll

As you can see in the name, it only is looking for 1 instance with getElementById

You can also do it like this…

['bloque01', 'bloque02', 'bloque03'].forEach(function(elms) {
    document.getElementById(elms).style.display = "block";
});

I would probably toggle visibility with a class though for this.

1 Like