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

Why this won't working right? I am sure that I won't type anything wrong...

<!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>
var input = document.querySelector("input");
var p = document.querySelector("p.description");
var button = document.querySelector("button");
button.addEventListener("click", ( ) = >
{ p.textContent = input.value + ':';
});

Could anyone help? Thank you !! :)

1 Answer

Kristian Rosenqvist
Kristian Rosenqvist
6,018 Points
button.addEventListener("click", ( ) = >
{ p.textContent = input.value + ':';
});

There is a problem with your arrow function syntax. For me it works if you remove the space between the equal sign and angle bracket:

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