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 trialHamzah Iqbal
Full Stack JavaScript Techdegree Student 11,145 PointsWhy can I use querySelector to select class, on question 3, but not on number 5?
// 1: Select the element with the ID 'about'.
// Store the element in the variable `about`.
const about = document.querySelector("#about");
about.style.border = "2px solid firebrick";
// 2: Select all the <h2> elements in the document.
// Set the color of the <h2> elements to a different color.
const h2Tag = document.getElementsByTagName("h2");
for (var i = 0; i < h2Tag.length; i++) {
h2Tag[i].style.color = "green";
}
const card = document.querySelector(".card");
card.style.backgroundColor = "yellow";
// 3: Select all elements with the class '.card'.
// Set their background color to the color of your choice.
// 4: Select only the first <ul> in the document.
// Assign it to a variable named `ul`.
const ul = document.querySelector("ul");
ul.style.border = "2px solid indigo";
// 5: Select only the second element with the class '.container'.
// Assign it to a variable named `container`.
const container = document.getElementsByClassName("container")[1];
container.style.backgroundColor = "royalblue";
// 6: Select all <a> elements that have a 'title' attribute.
// Set their color value to the color of your choice.
The soloution works, but If I wrote
const container = document.querySelectorAll(".container")[1]; instead it kept giving me an undefined error. Why is that so?
4 Answers
Liam Clarke
19,938 PointsHello
These do work the same and it would return the same value, please ensure you have no spelling errors in your code.
I can confirm that the below works exactly the same as getElementsByClassName()
const container = document.querySelectorAll(".container")[1];
container.style.backgroundColor = "royalblue";
Angela Davis
Full Stack JavaScript Techdegree Student 3,110 PointsI was wondering the same thing. I had also just planned to put the [1] on the second line where I was applying a new style color:
const container = document.querySelectorAll(".container"); container[1].style.backgroundColor = "royalblue";
I had been thinking it was similar to what we did in Question 2. But now I see that I needed to select my specific container element on the first step.
Heggy Here
1,747 Points- For 3,
document.querySelectorAll(".card")
works equally asdocument.getElementsByClassName("card")
for me.
I suggest checking your spelling. I often mis-spell words or leave out the 's' for getElementsByClassName
- For 5, I agree with Angela Davis on our need to select only the second element from our resulting node-list:
document.querySelectorAll(".container")[1]
Mary Pienzi
Full Stack JavaScript Techdegree Student 7,036 Pointsto dot or not to dot that is the syntax question.
document.querySelectorAll(".container")[1]; .container with "."
vs
document.getElementsByClassName('container')[1]; no "." just 'container';
Diane Bond
8,011 PointsA way to further understand Mary's comment, is if you are implementing document.getElementsByClassName, it is already understood that it is a class hence no "dot" required. If using document.querySelectorAll, because you are capable of querying a variety of things like ids classes and tags, you would then need to use the "dot" to clarify that you are using a class.