Help Debugging a Short Calculator

Hello, FCC community!

I am having a bit of a problem with a calculator I am making. I know it is generally frowned upon to post code and ask, “What’s wrong?”, but I am truly stumped. I was developing this in GitHub but then copied it into Codepen to make the changes easier to see. Can someone help me fix this?

I"m sorry. The calculator is supposed to take input (the user’s training pace and race pace in minutes and seconds) and produce an output (the percentage of race pace that the user trains at). The problem isn’t my math, which might look a little weird, but I am really taking the percentage of speed, not pace. My problem is that absolutely nothing is even displaying in the input box, and I’m not sure why it isn’t working.

If you look at the browser console (Ctrl+Shft+I in Chrome), when you start entering numbers into the 4 text boxes, you will see something like:

pacePercentages is not a function at HTMLInputElement.onchange

You are getting that message, because you have named your form the same name as the function you are trying to call. Change your function to something like “calcPacePercentages” and then update you onchange value.

After you fix the above, your text box will display NaN, because you are not properly referencing the values of the other 4 textboxes. You need to add “.value” to the end of your references (i.e.document.pacePercentages.trainingPaceMin.value).

After properly referencing the value property, you will see some kind of percentage in your textbox named percentage. Not sure if your percentage is what you expect, but you will have to play with your formula if not.

1 Like

Thank you so much!!! I caught the .value thing about five minutes ago, but I never would have thought to change the name of the function. Thanks to you and all the others who help make this forum (and FCC) awesome.

there’s a number of problems here

the immediate problem is the function name pacePercentages clashes with the form name when used inline in the onchange attribute of an input in the form - this is due to the way the attribute value is evaluated in the context of the form

to see this conflict add these two lines after the function

console.dir(pacePercentages)
console.dir(document.pacePercentages)

also add the same bit of javascript for onclick to any of the <input> elements like this

onclick="console.dir(pacePercentages);console.dir(document.pacePercentages)"

you’ll see this output in the console after clicking anywhere on the modified input element

ƒ pacePercentages()
form

form
form

the first two lines from outside the function show the distinct objects but the second pair of lines from inside the onclick expression show the incorrect resolution due to the name clash