1

So I have this form that is performing very basic calculations and when I submit it, it results to NaN.

The thing that is confusing me is when I do a typeof of one of the variables assigned to the value of each input, it returns "number", and yet I get NaN as a result. Can anyone tell me why or what it is I am doing wrong?

Here's my HTML:

<form name="baddiesCost">
     <input type="number" placeholder="Total Caught" name="goomba" id="goomba-form">
     <input type="number" placeholder="Total Caught" name="bobombs" id="bob-ombs-form">
     <input type="number" placeholder="Total Caught" name="cheepCheeps" id="cheep-form">
     <button id="submitForm">Submit</button>
</form>
 <h1 id="total"></h1>

Here's my JavaScript:

document.baddiesCost.addEventListener("submit", function(e) {
  e.preventDefault();
  var goombaCaught = document.baddiesCost.goomba.value * goombaCost;
  var bobombsCaught = document.baddiesCost.bobombs.value * bobombsCost;
  var cheepsCaught = document.baddiesCost.cheepCheeps.value * cheepCost;
  var goombaCost = 5;
  var bobombsCost = 7;
  var cheepCost = 11;
  var showTotal = document.getElementById("total");
  var total = goombaCaught + bobombsCaught + cheepsCaught;
  showTotal.textContent = cheepsCaught;
  console.log(bobombsCaught);
  console.log(typeof bobombsCaught);
})
Christian Lopez
  • 218
  • 3
  • 13
  • 1
    `when I do a typeof of one of the variables assigned to the value of each input, it returns "number"` it's because `NaN` is indeed a number. – VLAZ Apr 25 '18 at 18:33
  • 3
    You are using your `*Cost` variables before you have given them a value. Variable hoisting only works for the name, not the value – Patrick Evans Apr 25 '18 at 18:34
  • 1
    Also, you calculate `cheepsCaught` by multiplying by a variable you define later. – VLAZ Apr 25 '18 at 18:34
  • In addition, when you do `document.baddiesCost.goomba.value` you get a *string* out of it. To convert into a number, do `Number(document.baddiesCost.goomba.value)` – VLAZ Apr 25 '18 at 18:35
  • It also wouldn't hurt to wrap places where you are getting input values in `parseInt()` or `parseFloat()` depending on what type of value you are expecting. – dukedevil294 Apr 25 '18 at 18:35

1 Answers1

1

This statement document.baddiesCost.bobombs.value * bobombsCost; uses variable bobombsCost which is not defined at this time.

So, it is similar to: document.baddiesCost.bobombs.value * undefined; which will be NaN.

To solve this put variable inicialization before usage like in following code:

document.baddiesCost.addEventListener("submit", function(e) {
      e.preventDefault();

      var goombaCost = 5;
      var bobombsCost = 7;
      var cheepCost = 11;

      var goombaCaught = document.baddiesCost.goomba.value * goombaCost;
      var bobombsCaught = document.baddiesCost.bobombs.value * bobombsCost;
      var cheepsCaught = document.baddiesCost.cheepCheeps.value * cheepCost;

      var showTotal = document.getElementById("total");
      var total = goombaCaught + bobombsCaught + cheepsCaught;
      showTotal.textContent = cheepsCaught;
      console.log(bobombsCaught);
      console.log(typeof bobombsCaught);
    })

Anyway, NaN is number type, you can refer to following post for more explaination.

kat1330
  • 5,134
  • 7
  • 38
  • 61