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

The code is not changing the description

Here is my Code, it is not changing the heading

JAVASCRIPT CODE const input = document.querySelector("input"); const p = document.querySelector("p.description"); const button = document.querySelector("button");

button.addEventListenener("click", () => {

p.innerHTML= input.value + ":" ; }) ;

HTML CODE <!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>


4 Answers

Does not work

54,333 Points

If you run it through the console you get button.addEventListenener is not a function. Check your spelling of addEventListener.

Thanks Kris