Still trying to refresh myself on the html DOM, but keep getting distracted with other projects when I make any progress. I am note sure if you can do this, I tried searching for it but nothing gave me a clear picture. Suppose to be a simple tip calculator, but for the challenge it looks like the tip selections are buttons instead of inputs or selects. Right now, I gave the buttons a class and added values to them . For my calculations I was thinking of whatever tip button is pressed that value gets saved in a variable and I can use it later on. So, if the 15% was selected then “.15” would get saved in the variable. Not sure if that is the right approach, but here is the pen
There are many ways of solving this problem.
A great way would be to add an event listener to the button that listens for a click and then passes that event into a function. The function should extract necessary data from the button. The data could come directly from what the button’s text says and then converts the percentage to a decimal, or the button could have an attribute added to it that already has the calculation done for it. After determining the intended tip amount it would have to do the math against the bill total and return that value.
You did already add a forEach method and attach it to every button that does in fact add an event listener that calls a function, that is great!
You are not passing the event into the function though. The standard way to do this would be to put an argument of
evt into the parenthesis of your function invocation, and then utilizing that variable within your function to extract your data.
You can skip the step of passing an event into your function as you are pulling it from the
item.value property I see.
To finish, just add an event listener to your calculate tip button, and then use the input from the
#amount input, multiply it by the
percentValue variable and then divide by the
Ah I see. I am use to console.logging at the bottom when I check other stuff. I do have a question, not about the code above as I think I got it now that I know I am pulling the value. Not sure if you have experienced this lately, but anytime I put code in the code pen and then move it back to my vs code it does not work. It runs fine in codepen, but for example even moving my console.log in the event listener I do not get any console.logs when I look in the developer tools
In Codepen, it will build your entire html document for you, including the boilerplate for HTML to be interpreted and placing a direct link between your html, css, and js for you.
Make sure you are properly building an HTML file locally. It sounds like you have the HTML and CSS working but the link to the JS is broken.
Make sure you are accessing the script by adding a
console.log('test') at line 1 to eliminate that possibility. If nothing is printed at all then you will have an issue with the link.
So, the test works but it looks like the developer tools will not log anything from the event listener. Even just changing to a console.log or alert when the buttons are clicked does not fire the event listener
If line 1 works, meaning you are able to read the word
test come across the console, then move onto the next line and
console.log it and verify you are accessing it.
For the event listener to not work as intended, you might have an issue with the forEach statement before it. Perhaps your local environment has a slightly different HTML markup and the JS cannot find any elements on the page with a class of
percent. There could be any number or problems, but you will be best off finding it by console.logging each step as you go.
I found your problem.
You are not placing the script at the bottom of your
You have it inside of your
<head> tag which gets read first naturally.
By placing your
<script> inside of your
<head> (or anywhere physically above the place on the document that marks up the document), that script will not have access to what comes after (below) it.
<script> tag to the very end of your
<body> tag so that it has access to everything within the document.
Works! You’re awesome
Glad I could help =)
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.