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 JavaScript and the DOM (Retiring) Making Changes to the DOM Styling Elements

Posted by Danilo Rodriguez
Danilo Rodriguez
1,663 Points

Hide button only hides first element in divList

const toggleList = document.querySelector('#toggleList');
const listDiv = document.querySelector('.list');
const input = document.querySelector('input');
const p = document.querySelector('p.description');
const button = document.querySelector('button');


toggleList.addEventListener('click', () => {
     listDiv.style.dispay = 'none'
});

button.addEventListener('click', () => {
     p.innerHTML = input.value + ':'
});







<!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>
    <button id="toggleList">Hide list</button>
   <div class="list">
      <p class="description">Things that are purple:</p>
      <input type="text" class="description">
      <button class="description">'Change list description'</button>
      <ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>
      </ul>
   </div>
    <script src="app.js"></script>
  </body>
</html>

where did i go wrong? the console not showing any errors. i tried using const listDiv = querySelectorAll('.list') and it comes back undefined

2 Answers

Kevin Becerra
Kevin Becerra
14,243 Points

You misspelled Display, This created the bug that you saw that only hid the first element. Sometimes it can be difficult to spot these things, but using dev tools showed how the display property was still on block for all the elements. Sometime just rewriting the function can fix the problem because you won't spell it wrong twice.

Hope this Helps!

Danilo Rodriguez
Danilo Rodriguez
1,663 Points

Thanks. I actually was rewriting it and specifying everything in more detail when I saw the typo xP

in the future I'll use this bugfix sooner =)

Kevin Becerra
Kevin Becerra
14,243 Points

No problem, and don't let this discourage you and keep having fun coding!

Danilo Rodriguez
Danilo Rodriguez
1,663 Points
Danilo Rodriguez
Danilo Rodriguez
1,663 Points

I misspelled 'display' in my event listener. the toggleList button was then assuming the function of the other button which cleared the <p> in div since I clicked it without input.