JavaScript JavaScript and the DOM Making Changes to the DOM Styling Elements

I'm not able to recreate the button that hides the <div> element. What is wrong with my code?

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', () => { listDiv.style.display = 'none'; }

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

p.title = 'List description';


<!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='descripion'>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>

1 Answer

I needed a closing parenthesis and bracket.