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

Daven Hietala
Daven Hietala
8,040 Points

Odd and even backgroundColor is not working.

I have been examining my code for about an hour now and still cannot see what I am doing wrong. The backgroundColor is supposed to turn lightgray and is not responding to my code.

Here is what I have so far..

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

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

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

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

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

for (let i = 0; i < evens.length; i += 1) {
  evens[i].style.backgroundColor = 'lightgray';
}
<!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">oranges</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li class="error-not-purple">fire trucks</li>
        <li class="error-not-purple">snow</li>
        <li>plums</li>
      </ul>
    <script src="app.js"></script>
  </body>
</html>
@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #508abc;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

I would really appreciate any help! I do not understand what I am doing wrong here. Thank you in advance.

3 Answers

If you check the console you'll find: Uncaught TypeError: Cannot read property 'style' of undefined for this line:

errorNotPurple[i].style.color = 'red';

This is because you are looping through i < myList.length when you only have three list items in errorNotPurple. If you change to i < errorNotPurple.length then the rest of your script will execute.

Daven Hietala
Daven Hietala
8,040 Points

Thank you for your time Kris. What you have told me makes sense pertaining to this question. I am a bit confused as to why the code worked before on the previous video when it was like this.

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

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

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

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

The code still ran at that point. Once I added the evens variable to the code, I had the current issue. Why is it that the code worked before?

I hope this isn't an annoying question. My hope is to fully understand this lesson. Again, thank you Kris.

I'm not sure. For the current code when you go beyond i = 2 the errorNotPurple list item doesn't exist.

In checking with this video @ 2:57 he uses i < errorNotPurple.length

Edit: I checked the previous video and he changes it there as well @ 1:59.