JavaScript JavaScript and the DOM Getting a Handle on the DOM Selecting Multiple Elements

Leah Miller
Leah Miller
10,372 Points

"Selecting Multiple Elements" I feel like my code is right...

I feel like my code is right for this challenge yet it keeps asking if I selected all 7 list items. In the preview window all the items are the color they should be. I've had problems before where my code was right and the site did not register. Please help.

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

const rainbow = document.getElementsByTagName('li');

for(let i = 0; i < rainbow.length; i ++) {
  rainbow[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>

4 Answers

Leah Miller
Leah Miller
10,372 Points

Thanks, apparently it was looking for a specific way for it to be done.

Piotr Manczak
Piotr Manczak
Front End Web Development Techdegree Student 16,079 Points

Your solution should work as long as you don't touch this:

(var i = 0; i < colors.length; i ++)

You changed colors to rainbow. You shouldn't have.

Piotr Manczak
Piotr Manczak
Front End Web Development Techdegree Student 16,079 Points

var listItems = document.querySelectorAll('li');

var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {

listItems[i].style.color = colors[i];

}