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 Breaking on DOM Changes and Watch Expressions

Tetsuya Yokoyama
Tetsuya Yokoyama
11,286 Points
Posted by Tetsuya Yokoyama
Tetsuya Yokoyama
11,286 Points

Why "preventDefault()" not working???

In this REVP code, there's "e.preventDefault()" in submit function. But when I hit submit without input value. It creates list element as usual. Shouldn't it be stopped because there's no value(=default)??

Thanks in advance!!

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Please provide a specific time index in the video where this can be seen. I only saw edit/save function code and didn't find where an item was being added.

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The "default" that is prevented is the default behavior of a submit event, which would be to post the form data back to the server. So that seems to be working.

The behavior of creating a list element is all due to the code right here in the handler, which doesn't test the value before proceeding (but you could add a test).

Tetsuya Yokoyama
Tetsuya Yokoyama
11,286 Points
Tetsuya Yokoyama
Tetsuya Yokoyama
11,286 Points

Hi Steven, I appreciate that you taking time to reply this. Sorry my bad, this is the code snapshot There's "e.preventDefault()" on line 60.

app.js 
 form.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = input.value;
    input.value = '';
    const li = createLI(text);
    ul.appendChild(li);
  });

Thanks!!

Dylan Bailey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dylan Bailey
Front End Web Development Techdegree Graduate 17,232 Points
Dylan Bailey
.a{fill-rule:evenodd;}techdegree seal-36
Dylan Bailey
Front End Web Development Techdegree Graduate 17,232 Points

That method won't stop you from submitting without an input value. It stops the default action. And the default action of submit, on forms, is to refresh the webpage. So this particular method is stopping that from happening, so we can continue to populate our <ul> with <li> elements :)

Here's a link to the method.