Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ben Os
Ben Os
20,008 Points

querySelector works for the first of two elements but querySelectorAll won't work for both of them (you could check

The website http://formen.co.il has two buttons, in it's end "קליק כאן" and "לקריאת התקנון".

Both buttons has a problem --- They are too much taller because of a <br> inside them. To remove the <br> I did the following:

document.querySelector(".elementor-button-link br").style.display = "none";

This works but if I make querySelector into querySelectorAll to effect all buttons instead just the first one, it no longer works.

Why would the All prevent it to work?

1 Answer

Jon Mirow
Jon Mirow
9,864 Points
Jon Mirow
Jon Mirow
9,864 Points

Hi, do you have the code you're using for querySelectorAll?

My hunch is that it's because querySelector returns the first element if finds, and querySelectorAll returns a node list of all elements that match, so you have to select the index of the element you want in that node list? Much like getElementById() Vs getElementsByClassName()

for example here is how you'd select body with each:

let body = document.querySelector("body")
let alsoBody = document.querySelectorAll("body")[0]
Ben Os
Ben Os
20,008 Points

The code I use for querySelectorAll is basically the same code, just with added all: document.querySelectorAll(".elementor-button-link br").style.display = "none";