CODEWITHSUNDEEP
javascriptfunction
alwaysalesson
alwaysalesson

Reputation: 3

How do I use the querySelector?

So I got this code:

Function9() {
            x = document.getElementById('BakjeRood');
            x.style.opacity=1;
            y = document.querySelectorAll("#BakjeBlauw, #BakjeGeel, #BakjePaars, #BakjeRoze, #BakjeWit");
            y.style. opacity = 0;
        }

If you click the button with function9() the image 'BakjeRood' gets an opacity of 1, but the other images (BakjeBlauw etc.) should then get an opacity of 0 (this structure is the same for all the functions I have on my site. How do I get this second part to work?

Upvotes: 0

Views: 952

Answers (2)

Matthew Layton
Matthew Layton

Reputation: 42390

In your example, you've illustrated a knowledge of getElementById, which by nature returns a single HTMLElement instance or derivative, whereas querySelectorAll returns an enumerable, list/array-like object, containing all HTMLElement instances that match the query.

var elems = document.querySelectorAll("#x, #z, #z");
for(var index = 0; index < elems.length; index++) {
    elems[index].style.opacity = 0;
    elems[index].canDoOtherStuffToo();
}

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

You need to iterate over the results of querySelectorAll - it returns an array-like object (a list of nodes), not a single node.

Upvotes: 1

Related Questions