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

Keno Aguiar
Keno Aguiar
4,741 Points

This is weird

When I check my work, it's telling me that i didn't even add 'addEventListener' but its right there.

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>

2 Answers

james south
james south
Front End Web Development Techdegree Graduate 33,248 Points

it is right there, but it is being called on the wrong element. read the instructions carefully to see what the event listener should be called on.

Hi Keno,

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

form.addEventListener('submit', (e) => {    //   you use submit  event on form element
  e.preventDefault();
});

Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.) -- MDN : https://developer.mozilla.org/en-US/docs/Web/Events/submit

Hope that helps :)