Solution retrospective
I had a challenge around the scoping of one of variables
let tipOutput = document.getElementById("tip-output"); let totalOutput = document.getElementById("total-output");
These variables where original local scope within my function: collectUserInput();
I tried to access these variables in my resetOutPut() function which lies outside of the scope of that other function. I first tried correcting this problem through calling these variables as arguments in the function, but I found that I had to just make these variables global.
For some reason my resetOutput function does indeed clear the output but it requires 2 clicks? ive tried doing a little debugging, but it's ones of them weird bugs where the interpreter basically ignores that there is an issue; I.E no syntax error ect..
Please log in to post a comment
Log in with GitHubCommunity feedback
- @alinakanivecka
You need to pay attention to styles. And you should do buttons as <buttons>, not <inputs>, because user can write anything there. As for your issue with resetOutPut(). The problem is that your function adds an event listener to button but it is being called only when user clicks it, so the click event handler will only be called on next click and each click will add an additional listener. So if you click 100 time, on 101st time event listener function will be called 100 times. You should either:
- remove onclick from html and call your resetOutPut() in js once or
- rewrite your resetOutPut() so it does not add an event listener but only resets values. So when button is clicked it resetOutPut will be called since used in onclick and it will clear your elements content
Join 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