We are listening for a submit event on the document (for the tests I assume) and the form is triggering that event. If you add event.stopPropagation() to the calculate function it should fix it.
Thank you. I also discovered that if I add action="" as an attribute for the form, that also stops it. Is there a potential problem if I use action=""?
This is what I got on my editor screen (using Firefox btw): when I typed in your solution (although it stops the TypeError: action is null):
Adding the empty action attribute is probably a better solution, at least for this issue with the challenge. It shouldn’t cause any issues. It might be less confusing for the camper and we can add that to the HTML silently without it being too obvious and confusing.
It is because the event is the global event object and that is discouraged usage (it is a deprecation warning). It should work just fine, but passing the event as an argument and adding the parameter to the function would be better. I just showed that because it was easier.
As an aside. Deprecation warnings in CSS/HTML/JS are not really deprecation warnings seeing as nothing is ever removed because of backward compatibility. If it is added to the browser it is (almost) never removed again. Talk about high pressure when adding new functionality. You get it right or you get it wrong…forever.
To be valid HTML the action attribute shouldn’t use an empty value.
It isn’t a huge deal, but if you want to prevent a form submission (and subsequent page refresh) you should use preventDefault. To prevent the event from propagating you can use stopPropagation.