Can you select more than one Id?

Question

<p class="Links" onclick="window.location.href = 'file:///C:/Users/Dell/Desktop/Online%20Store.html#Residential'; document.getElementById('residence1, residence2, residence3').style.display='block'; document.getElementById('Commercial').style.display='none';">
Residential
</p>

I am trying but I fail to select more than one id using this method. Is my method correct or wrong?

Answer 1

I assume you're referring to this code:

document.getElementById('residence1, residence2, residence3').style.display='block'

You are able to select multiple elements with .querySelectorAll() which will return a node list that you can iterate over with .forEach()

So, for your example, you could do the following:

document.querySelectorAll('#residence1', '#residence2', '#residence3').forEach(el => el.style.display='block')

Answer 2

You can use query selectors to get multiple elements at once. Check this page out to get a brief list of how to use querySelectorAll().

In your case you can simply use

querySelectorAll("#id1, #id2, #id3") which will return an array of all the elements matching these id's

Answer 3

If you need to collect a bunch of elements based on more than one selector, querySelectorAll is your best friend.

Unlike jQuery, querySelectorAll returns a NodeList type of object, similar to an array. To execute anything on each of the collection's members, you need to iterate over the collection yourself, e.g. using forEach:

<p onclick="document.querySelectorAll('#residence1, #residence2, #residence3').forEach(el => el.style.display='block')">
Residential
</p>

<div id="residence1" style="display: none;">residence1</div>
<div id="residence2" style="display: none;">residence2</div>
<div id="residence3" style="display: none;">residence3</div>

Please note that this addresses only your immediate syntactical needs; it merely fixes your (bad) approach.

What you should instead/not do:

• NEVER work with element.style - use CSS classes, or in case of showing/hiding elements, use the builtin universal hidden attribute of HTML.

Example:

Instead of doing

element.style.display = 'block'

rather make sure your CSS has a class .hiddendefined

.hidden { display: none; }

and then to show an element, remove the class from it, and to hide it, add the class:

element.classList.remove('hidden'); // show
element.classList.add('hidden'); // hide

As stated before, specifically for showing/hiding, the most simple thing to do is toggle the boolean hidden property of the element:

element.hidden = false; // show
element.hidden = true; // hide

or, if you prefer attributes over properties:

element.removeAttribute('hidden'); // show
element.setAttribute('hidden', 'hidden'); // hide

Also, as other have already stated, if you need to toggle the visibility of a whole collection of element, the best way is to give all those elements the same CSS class name (which makes it much easier to select):

<p onclick="document.querySelectorAll('.residence').forEach(el => el.hidden = !el.hidden)">
Residential
</p>

<div class="residence" hidden>residence1</div>
<div class="residence" hidden>residence2</div>
<div class="residence" hidden>residence3</div>

I've also added the capability to rather toggle the visibility of the .residence div elements by not assigning a literal value to el.hidden, but instead taking what's already in el.hidden and inverting the boolean using the not operator !.