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

challenge selecting multiple elements

Challenge Task 1 of 1 The for loop cycles over list items and applies a color to each item using the values stored in the colors array. For example, the first color in the array ( #C2272D) is applied to the first list item, the second color (#F8931F) to the second list item, and so on. Complete the code by setting the variable listItems to refer to a collection. The collection should contain all list items in the <ul> element with the ID of rainbow.

Bummer: There was an error with your code: ReferenceError: Can't find variable: getElementByClassName
js/app.js index.html var listItems = getElementByClassName('rainbow'); var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"]; ‚Äč for(var i = 0; i < colors.length; i ++) { listItems[i].style.color = colors[i];
}

js/app.js
var listItems = getElementByClassName('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>

1 Answer

Steven Parker
Steven Parker
174,022 Points

There isn't any function named "getElementByClassName" that would return a single element, but there is a "document.getElementsByClassName" (plural) that returns an element collection.

But you don't need to use that here anyway, since "rainbow" is not a class name but an ID. Keep in mind that it's also the ID of the parent element of the ones you want.