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

Abubakr Alhaj
Abubakr Alhaj
4,297 Points

JavaScript and DOM Chalange

the challenge is about to cycle over list items and apply color from an array I tried to figure out what's wrong in my code! I wrote my code as below:

let listItems = querySelectorAll('li');
const 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>
js/app.js
let listItems;
listItems = querySelectorAll('li');
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
Abubakr Alhaj
Abubakr Alhaj
4,297 Points

I solved it and my new code as below :

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

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

2 Answers

James Akpan
James Akpan
4,528 Points

What was the issue???

Abubakr Alhaj
Abubakr Alhaj
4,297 Points

I forgot to write document before querySelector() ,

James Akpan
James Akpan
4,528 Points

Ah!!! Yes i see that now! Well done bro!!!