Question

所以我有这个表格执行非常基本的计算，当我提交它时，它会导致NaN。

让我感到困惑的是当我为每个输入的值分配一个变量时，它会返回＆＃34; number＆＃34;，但我得到了NaN作为结果。谁能告诉我为什么或者我做错了什么？

这是我的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>

这是我的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);
})

Answer 1

此语句cd ..使用此时未定义的变量document.baddiesCost.bobombs.value * bobombsCost;。

因此，它类似于：bobombsCost，它将是document.baddiesCost.bobombs.value * undefined;。

要解决此问题，请在使用前将变量inicialization置于以下代码中：

NaN

无论如何，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); })是数字类型，您可以参考以下post获取更多解释。

为什么我的表单输出NaN？

1 个答案: