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

Asking for an answer regarding JavaScript DOM quiz

Hello guys, I got stuck in a DOM quiz. It says that I have to manipulate the colour of the list in HTML, and it appears working when I use this Js code. However, when I submit this code, it the bot says "Did you select all seven items?". Help me; I don't quite understand with this :). Thank you sincerely.

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

for(var i = 0; i < colors.length; i ++) {
  listItems.children[i].style.color = colors[i];    
}
<!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>
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.children[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>
Dave StSomeWhere
Dave StSomeWhere
19,785 Points

The challenge wants you to update only update 1 line of code (var listItems;) with a method that will return all 7 list items. You are just returning 1 item and it is a UL element. So, getElementById() is not the correct method.

Can you find a method that will return all 7 list items?

1 Answer

First you have to select the ul with an ID #rainbow Then loop through the ul and its children with a for loop Apply the colors in the array to each children

const listItems = document.getElementById('rainbow'); //gets the <ul> with an ID #rainbow

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

for (let i = 0; i < listItems.children.length; i++) { //loops through the <li> items which are children of <ul>
  listItems.children[i].style.color = colors[i]; //applies the colors in the array to each children of the listitems as it loops
}