Design comparison
Solution retrospective
I have a question about the custom percentage tip. For my code, I ended up using a form to input the custom tip value. The problem is that when the value is added, my JavaScript function (for the calculation) won't start until I click on the custom tip form again. Is there a way to do this process in one go? Or else what other way did you tackle that part?
Process :
- Click on the custom tip form to input value
- JavaScript function starts but the input value is 0 --- (want to skip this step)
- Move the cursor away from the custom tip form --- (want to skip this step)
- Move the cursor back to the custom tip form and click on it --- (want to skip this step)
- JavaScript function starts (takes inputted value)
Any feedback is welcomed and appreciated :)
Community feedback
- @ChamuMutezvaPosted about 3 years ago
- to answer your question, use the
input
eventListener in place of the click eventListener.
There are several things that needs to be changed for it to be operable by assistive technology users.
- semantic matters, use elements that are built for the job. A div is not an interactive element - using it for the percentages will require much more extra work to allow keyboard users operate the calculator. Use radio buttons or buttons.
- input elements must have a label
- just use one form element that will be the main parent for all the input elements, no need to create a form for each element.
- headings should ascend in order h1, h2, h3 etc. Only using one h1 is considered best practice
Marked as helpful0 - to answer your question, use the
- @prathmeshgodsePosted about 3 years ago
Try using input EventListener to check the value of the custom tip percentage. Check out this W3Schools Page for details
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord