Function displaying NaN in text box

Question

I created a function that calculates the final cost of an order, and I'm trying to display it in a text box. However, the text box keeps returning "$ NaN" and I cannot find the error. I'm a very beginning student of html and js, so any explanation is appreciated.

 function costCalculator() {
        totalCost = (totalCost + burgerOnePrice * Number(burgerOne.value));
        totalCost = (totalCost + burgerTwoPrice * Number(burgerTwo.value));
        totalCost = (totalCost + burgerThreePrice * Number(burgerThree.value));
        totalCost = totalCost * (1 + tip);

          if (useCard == 1) {

            if (Number(balance.value) >= totalCost) {
              totalCost = 0;
              cardBalance = cardBalance - totalCost;
              balance.value = cardBalance;
              finalCost.value = totalCost;

            } else {
              totalCost = (totalCost - Number(balance.value));
              balance.value = 0;
              finalCost.value = totalCost;
            }

          }

        document.getElementById("finalCost").value= "$ "+parseFloat(this.totalCost).toFixed(2);
        document.getElementById("balance").value= "$ "+parseFloat(this.balance).toFixed(2);  

        }

Here's the button that calls the function and the text box that I want it to appear it:

        <button id="totalSales" onclick = "costCalculator();" >Calculate Total</button> 
                 <br><br>

        <input type="text" id="finalCost" value="" size="3" readonly="true" />

Also it's not clear how/where/when `totalCost` is initialized to zero. — Pointy, Mar 24 '20 at 21:16
"set" == "assign". You never do `this.totalCost = something` — Barmar, Mar 25 '20 at 00:24
Where is the variable `totalCost` declared with `var` or `let`? — Pointy, Mar 25 '20 at 01:22
Maybe check also this https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms — Jan, Mar 25 '20 at 08:23

score 0 · Answer 1 · answered Mar 25 '20 at 08:19

You should check console log or run debugger (F12) first - lot of bugs / missing info at least in question here, but in case I put something instead of all missing items, it starts to run without code errors at least ;-)

var burgerOnePrice = 123,
    burgerTwoPrice = 234,
    burgerThreePrice = 345,
    tip = 456,
    useCard = 1;
function costCalculator() {
    var totalCost = 0,
        f = document.forms[0],
        balance = { value: f.balance.value.replace(/[$ ]/,'') },
        burgerOne = f.burgerOne,
        burgerTwo = f.burgerTwo,
        burgerThree = f.burgerThree;
    totalCost = (totalCost + burgerOnePrice * Number(burgerOne.value));
    totalCost = (totalCost + burgerTwoPrice * Number(burgerTwo.value));
    totalCost = (totalCost + burgerThreePrice * Number(burgerThree.value));
    totalCost = totalCost * (1 + tip);

    if (useCard == 1) {

        if (Number(balance.value) >= totalCost) {
            totalCost = 0;
            cardBalance = cardBalance - totalCost;
            balance.value = cardBalance;
            f.finalCost.value = totalCost;

        } else {
            totalCost = (totalCost - Number(balance.value));
            balance.value = 0;
            f.finalCost.value = totalCost;
        }

    }

    document.getElementById("finalCost").value = "$ " + parseFloat(totalCost).toFixed(2);
    document.getElementById("balance").value = "$ " + parseFloat(balance.value).toFixed(2);
}

<form>
    <input type="button" id="totalSales" onclick = "costCalculator();" value="Calculate Total">
                        <br><br>
    <input name="burgerOne" value="1">
    <input name="burgerTwo" value="2">
    <input name="burgerThree" value="3">
    <input type="text" id="finalCost" value="" size="3" readonly="true" />
    <input id="balance" value="$ 100000">
</form>

Function displaying NaN in text box

1 Answers1