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

kingdavid igbayilola
kingdavid igbayilola
8,678 Points

javascript DOM

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

1 Answer

Elijah Quesada
Elijah Quesada
Front End Web Development Techdegree Graduate 31,102 Points

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');
kingdavid igbayilola
kingdavid igbayilola
8,678 Points

Thanks, but take a look at this code

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Nick Pettit.</p> </footer> </div> <script src="js/app.js"></script> </body> </html>

I want to select all the link in the ('li') nav tag but they are more than one (' li ') tag in the code how can use a selector here...... ?