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

Fernando Jimenez
PLUS
Fernando Jimenez
Courses Plus Student 8,203 Points
Posted by Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,203 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
229,644 Points
Steven Parker
Steven Parker
229,644 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,831 Points
Matt Fuller
Matt Fuller
8,831 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.