JavaScript DOM Scripting By Example Adding and Removing Names Using the submit Event

Emily DeWitt
Emily DeWitt
4,210 Points

Why am I getting the message "You didn't use addEventListener on the form." when it is definitely on the form?

const form = document.querySelector('form'); const submitButton = form.querySelector('[type=Submit]');

submitButton.addEventListener('click', () => {

});

app.js
const form = document.querySelector('form');
const submitButton = form.querySelector('[type=Submit]');

submitButton.addEventListener('submit', () => {

});
index.html
<!DOCTYPE html>
<html>
<head>
  <title>Submit Event</title>
</head>
<body>
<form>
  <label>Name:</label>
  <input type="text" name="name">
  <input type="Submit" name="submit" value="Submit">
</form>
  <script src="app.js"></script>
</body>
</html>

1 Answer

Cheo R
Cheo R
37,145 Points

You're on the right track of changing the event to run on submit.

    const form = document.querySelector('form');
    const submitButton = form.querySelector('[type=Submit]');

    submitButton.addEventListener('submit', () => {

    });

But what you're currently adding the event listener is to the submit button, not the form itself. All you need to do is replace submitButton, with form.