Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Fernando Jimenez
PLUS
Fernando Jimenez
Courses Plus Student 7,720 Points

Why is this simple script not working?

So apparently on the 2nd step I get an error saying "Cannot set property color of undefined"

.// 1: Select the element with the ID 'about'. // Store the element in the variable about. const about = document.getElementById("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 h2 = document.getElementsByTagName("h2"); h2.style.color = "red"; -------Error here?!???

// 3: Select all elements with the class '.card'. // Set their background color to the color of your choice. const cardclass = document.querySelectorAll(".card"); cardclass.style.color = "yellow";

// 4: Select only the first <ul> in the document. // Assign it to a variable named ul. firstul = document.querySelector("ul"); firstul.style.border = "2px solid indigo";

// 5: Select only the second element with the class '.container'. // Assign it to a variable named container. container = document.querySelector(".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.

const atitle = document.querySelectorAll("a[title]"); atitle.style.color = "green";

2 Answers

Steven Parker
Steven Parker
215,954 Points

You didn't indicate which course this is for. The solutions would be very different if jQuery is involved.

The "getElementsByTagName" function returns an HTMLCollection which has no "style" property to set. You probably intended to set the style of one of the elements in that collection, or use a loop to set them all.

You can use an index to access an element collection just as you might with an array.

For future questions, please be sure to format any code with the Markdown syntax.

Matt Fuller
Matt Fuller
8,725 Points

Two years late, but for anyone else facing this same problem (which I was), building on what Steven posted above -

What's missing is a for loop to iterate over the individual elements within the returned collection. As Steven said "The "getElementsByTagName" function returns an HTMLCollection which has no "style" property to set.".

I solved this issue with this:

const h2 = document.querySelectorAll("h2");
for(let i = 0; i < h2.length; i++) {
h2[i].style.color = "yellow";
}

I'm still relatively new to Javascript, so I hope this is correct.