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 tjeiosajfdksl
tjeiosajfdksl
Courses Plus Student 8,981 Points

I followed along but code does no work please help

why is code not working as it does not toggle?

const toggleList = document.getElementById('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',()=>{
    if(listDiv.style.display == 'none'){
        toggleList.textContent ='Hide list';
        listDiv.style.display ='block';
    } else {
        toggleList.textContent ='Show list';
        listDiv.style.display ='none';
    }
});

button.addEventListener('click', () => {
  p.innerHTML = input.value + ':';
});
index.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>

    <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>
Bouh Houssein Kaireh
Bouh Houssein Kaireh
5,103 Points

Check the path of app.js

3 Answers

tjeiosajfdksl
PLUS
tjeiosajfdksl
Courses Plus Student 8,981 Points
tjeiosajfdksl
tjeiosajfdksl
Courses Plus Student 8,981 Points

Hi the path is correct. I see that css/style is different path to below but it's because I don't use the style sheet. I should add I am not running it in workspace but even when I do it doesn't work and that is with the adjusted file path for folder

steven alston
steven alston
16,292 Points
steven alston
steven alston
16,292 Points

What Bouh is asking is, Is the name of your js file 'app.js', and is it in the same directory as your index.html? Because your html file doesn't need css styling to run. However, your js name and path must be correct in your index.html file, in order for the javascript to run and interact with the HTML. With what you have, your code should work if that is set correctly.

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

Add the .description class to your variable declaration for 'button' (per the video at 8:05).