JavaScript JavaScript and the DOM Making Changes to the DOM Getting and Setting Text with textContent and innerHTML

code does not work

getting this error "Uncaught TypeError: Cannot set property 'textContent' of null at HTMLButtonElement.button.addEventListener" when i click the button.

<!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 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>
<script src="app.js"></script>

</body> </html>

const input = document.querySelector('input'); const p = document.querySelector('p.description'); const button = document.querySelector('button');

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

1 Answer

Steven Parker
Steven Parker
177,563 Points

There should be an equal-sign between the word "class" and the string value "description".

<button class"description">    <!-- original -->
<button class="description">   <!-- fixed -->

thank you