JavaScript JavaScript and the DOM Getting a Handle on the DOM Using CSS Queries to Select Page Elements

Posted by ghaidas
ghaidas
1,894 Points

couldn't change the colors

app.js file

const myList = document.getElementsByTagName("li");

for (let i =0 ; i < myList.lengthl; i +=1){ myList[i].style.color = "purple"; }

const errorNotPurple = document.querySelectorAll(".error-not-purple");

for (let i =0 ; i < errorNotPurple.lengthl; i +=1){ errorNotPurple[i].style.color = "red"; }

const evens = document.querySelectorAll('li:nth-child(even)');

for (let i =0 ; i < evens.lengthl; i +=1){ evens[i].style.backgroundColor = "lightgray"; }

index.HTML file

<!DOCTYPE html> <html> <head> <title>JavaScript and the DOM</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 id="myHeading">JavaScript and the DOM</h1> <p>Making a web page interactive</p>

<p title="label">Things that are purple:</p>

<ul> <li>grapes</li> <li class= "error-not-purple">orages</li> <li>amethyst</li> <li>lavender</li> <li class= "error-not-purple">sun</li> <li class= "error-not-purple">snow</li> <li>plums</li> </ul> <script src="app.js"></script> </body> </html>

1 Answer

Nico Trivelli
Nico Trivelli
20,360 Points
Nico Trivelli
Nico Trivelli
20,360 Points

Hi ghaidas,

your code seems fine, except you have an l (L letter) at the end every time you used the length property.

I think if you remove that l every time it appears and return to the normal length you should be good to go. :)

HTH!