Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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
221,291 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();