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

Leah Miller
Leah Miller
10,996 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

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

Leah Miller
Leah Miller
10,996 Points

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

Thanks

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

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.

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];

}