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 JavaScript and the DOM (Retiring) Getting a Handle on the DOM Selecting Multiple Elements

Posted by Nas Jones
Nas Jones
7,849 Points

This is confusing me alot. I don't see what i'm doing wrong.

This is a challenge after the video. There is a link with the challenge that directs me to developer Mozilla. That confuses me even more.

js/app.js 
var listItems = document.getElementById('rainbow');
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow!</title>
  </head>
  <body>
    <ul id="rainbow">
      <li>This should be red</li>
      <li>This should be orange</li>
      <li>This should be yellow</li>
      <li>This should be green</li>
      <li>This should be blue</li>
      <li>This should be indigo</li>
      <li>This should be violet</li>
    </ul>
    <script src="js/app.js"></script>
  </body>
</html>

2 Answers

Martin Balon
Martin Balon
43,651 Points
Martin Balon
Martin Balon
43,651 Points

Hi Nas,

In your for loop you are accessing variable listItems dynamically to give each list item different color. Problem is that your variable listItem doesn't contain an array but an html element (ul). You have to use method that returns an array or a list so you can loop through it. See the code below - I've only changed one line of code and it works now.

var listItems = document.getElementsByTagName('li');
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

console.log(listItems)

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
Nas Jones
Nas Jones
7,849 Points
Nas Jones
Nas Jones
7,849 Points

Hello, i see what i did wrong thank you for the help