Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Antonio Ascue Avalos
Antonio Ascue Avalos
3,023 Points

document.querySelectorAll does not work when trying to list the HTML element with the error-no-purple class

When type in the following in the console I get: document.querySelectorAll('.error-not-purple') NodeList [] length:0;

I do not get all the li-tags with the class. Why?

HTML

<!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>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>

    <input src="text" id="headingStyle">
    <button id="textStyleButton">Change headline style to bold or italic</button>

    <script src = "app.js" ></script>
  </body>
</html>
Kevin Gates
Kevin Gates
15,053 Points

Can you share your whole app.js file code as well?

Kevin D
Kevin D
8,646 Points

It could be possible that you were not in the correct scope in the console when you ran document.querySelectorAll('...')

1 Answer

Steven Parker
Steven Parker
243,201 Points
Steven Parker
Steven Parker
243,201 Points

Odd, when I tried it I got the expected response:

NodeList(3)
  0: <li class="error-not-purple">​
  1: <li class="error-not-purple">​
  2: <li class="error-not-purple">
  length: 3

But then I didn't have your "app.js". Does your JS code remove these nodes before you can examine them in the console?