javascript DOM

Question

i am gettig an error message ['listItems[i].style']

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>

js/app.js

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

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}

Answer 1 · 2018-07-27T12:40:52Z

July 27, 2018 12:40pm

Here the question states, cycle over list items and apply colors from an array called colors.

The code will apply the first color to the first list item, the second color to the second list item and so on.

On line 1 of app.js, set the variable listItems to refer to a collection(. The collection should contain **all list items* in the unordered list element with the id of rainbow.

Currently, you have selected elements with the id of #rainbow and not list items.

What you want to do is select all the list items. You can do this by replacing "#rainbow" with "li";

You will then have a collection of all li tags. Which now, you could iterate through.

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

Welcome to the Treehouse Community

Looking to learn something new?

kingdavid igbayilola

kingdavid igbayilola

javascript DOM

1 Answer

Elijah Quesada

Elijah Quesada

kingdavid igbayilola

kingdavid igbayilola