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

Agnieszka Niemiec
Agnieszka Niemiec
6,528 Points

The code is not working

I wrote the same code as in the video and the button is not clickable.

Agnieszka Niemiec
Agnieszka Niemiec
6,528 Points

//app.js

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

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>

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

Thank you :)

1 Answer

Steven Parker
Steven Parker
182,603 Points

The "querySelectorAll" function returns an element collection, which is what you store in "p". But later in the event handler, you try to assign the "innerHTML" property of "p", which collections don't have.

If you use the "querySelector" function instead, it will select the first single element and the handler will work.