Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Keno Aguiar
Keno Aguiar
4,741 Points
Posted by 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 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.

Karim Bostan
Karim Bostan
20,430 Points
Karim Bostan
Karim Bostan
20,430 Points

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