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

Cant figure out the object

I'm getting stuck on the rainbow[i] part

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

for(var i = 0; i < colors.length; i ++) {
  rainbow[i].style.color = colors[i];    
<!DOCTYPE html>
    <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>
    <script src="js/app.js"></script>

3 Answers

kevin curtis
kevin curtis
15,286 Points

This works for me

listItems = document.querySelectorAll('#rainbow li');
kevin curtis
kevin curtis
15,286 Points

Befor ethe for loop runs you need to assign the listItems variable to a list of items in the dom. So you'll have to select all the li nested inside the #rainbow.

Something like the following

listItems = document.querySelectorAll('Your selection goes here');

Now it just keeps telling me u need to select 7 list items

i was missing the hashtag part thanks for the help rewatching the video helped to