Javascript not changing P element
I'm having issues trying to understand why my javascript code is not updating the paragraph in my html. When i type the age number in the input field and submit its supposed to display a message on the paragraph. I've tried to look at the id for both and noticed they are the same. If anyone could help me understand why its messing up i would appreciate it.
https://codepen.io/Jwfrank3/pen/mdNeMro
9 Replies
codepen is overridding the
.onclick because it's adding a click handler
also, why are you using a click handler?
why don't you have a form that you then handle the submit event instead?
with the click event, i can't submit it without pressing enter
also, the logic is pretty messy
and the let outside the function doesn't make sense
you also have a bug because you use == instead of ===, which makes it so that an empty string matches 0 instead of going to the else
also, for a consistent parsing, use parseInt() with radix set to 10Honestly I just copied and pasted my code from vscode to code pen just to present it better. I'm using live server with vscode to render it in a browser. I was trying to learn from a youtube tutorial from the channel brocode and he was covering if else statements. The .onclick is just what he recommended because derivitave of what used in the video earlier. I believe i have a syntax or spelling issue in the code but I've checked a million times and i don't where it is. for a beginner just stating out how can i fix the existing code base?
don't use
.onclick
EVER
unless you have a very very very good reason to use ithow do i make the button update the p element to display the messages in the function then?
use
.addEventListener()
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
also, what you have there is a poor-man's form, but without a form
so, use a <form> as the parent, and then handle the submit event
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
you will need to receive the event argument, which you then call event.preventDefault()
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
this allows people to press enter to send the informationThis is a lot of information, I'll read through this and see what I can do. Thank you for all this it is a lot
oh, there's a lot more "wrong"
but when you finish this, i will tell you the rest
also, move the
let age into the functionGonna take a 30 minute to hour break to reset my brain. Then I'm gonna tackle the MDN sites again and reformat the code.
take your time