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 One Solution

Hamzah Iqbal
seal-mask
.a{fill-rule:evenodd;}techdegree
Hamzah Iqbal
Full Stack JavaScript Techdegree Student 11,145 Points

Why 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

Hello

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
seal-mask
.a{fill-rule:evenodd;}techdegree
Angela Davis
Full Stack JavaScript Techdegree Student 3,110 Points

I 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
Heggy Here
1,747 Points
  • For 3, document.querySelectorAll(".card") works equally as document.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
seal-mask
.a{fill-rule:evenodd;}techdegree
Mary Pienzi
Full Stack JavaScript Techdegree Student 7,036 Points

to 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
Diane Bond
8,011 Points

A 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.