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

Richard Contreras
Richard Contreras
7,026 Points
Posted by Richard Contreras
Richard Contreras
7,026 Points

Why can't I get this form to display: "none" after submitting?

Please see this codepen: https://codepen.io/pdxcoder/pen/JLJjGR

I have a form with id="changeThis" on line 4 of the HTML. When you click on the submit button, the program grades the quiz, displays an alert, and then replaces the form with "<p>Thanks for taking the quiz!</p>" per line 57 of the JS. This actually works for me right now.

However, I had initially tried setting the form to display: "none" (see commented out JS on lines 53-55). This doesn't work, the page just refreshes when you click submit. I tried visibility: "hidden" but that didn't work either. This is confusing to me because I'm able to successfully target that "changeThis" id tag with .innerHTML.

I've only been studying JS a few weeks, so I know this code is crude and there are many things I need to learn to do differently, but at this point I would like to know why I couldn't get it to display: "none".

Thanks!

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Handling a "click" doesn't prevent a "submit" event from also occurring, and I don't think CodePen is able to handle a form submit. To prevent that, you might want to add this to the "gradeQuiz" function:

  window.event.preventDefault();