Question

我正在尝试编写一个简单的JavaScript程序，根据表单中的某些参数计算气体成本。提交表单后，我在“calculatedMonthlyCost”div中收到NaN错误。

有谁能告诉我我做错了什么？有没有更好的方法呢？

<form>
  Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
  <br>
  Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
  <br>
  How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
  <br>
  <input type="submit" value="Submit">
  <br>
</form>

<div id="calculatedMonthlyCost"></div>

<script>
var calcCost = function  (costOfGas, vehicleMPG, numMiles) {
  var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
  var weeklyCost = dailyCost * 5;
  var monthlyCost = weeklyCost * 4;

  return {
    dailyCost: dailyCost,
    weeklyCost: weeklyCost,
    monthlyCost: monthlyCost
  };
}

var userCostOfGas = document.forms[0].costOfGas.value;
var userMPG = document.forms[0].vehicleMPG.value;
var userNumMiles = document.forms[0].numMiles.value;

document.forms[0].onsubmit = function(e) {
  e.preventDefault();
  var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
  var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
  calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};
</script>

Answer 1

在调用onsubmit方法之前保存输入的值。这实际上保存了一个空白值，因为变量是在用户输入值之前设置的，并且它不是动态的。需要在提交时检查值。

document.forms[0].onsubmit = function(e) {
  var userCostOfGas = parseInt(document.forms[0].costOfGas.value,10);
  var userMPG = parseInt(document.forms[0].vehicleMPG.value,10);
  var userNumMiles = parseInt(document.forms[0].numMiles.value,10);

  e.preventDefault();
  var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
  var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
  calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};

Answer 2

您在页面加载时获取值（当它们为空时）。您只需要在onsubmit事件侦听器中获取值，并将它们转换为Numbers。

＆＃13;

var calcCost = function  (costOfGas, vehicleMPG, numMiles) {
  var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
  var weeklyCost = dailyCost * 5;
  var monthlyCost = weeklyCost * 4;

  return {
    dailyCost: dailyCost,
    weeklyCost: weeklyCost,
    monthlyCost: monthlyCost
  };
}

document.forms[0].onsubmit = function(e) {
  e.preventDefault();
  var userCostOfGas = +document.forms[0].costOfGas.value;  // < Move these lines here and
  var userMPG = +document.forms[0].vehicleMPG.value;       // < add a plus sign before them
  var userNumMiles = +document.forms[0].numMiles.value;    // <
  var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
  var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
  calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};

＆＃13;

<form>
  Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
  <br>
  Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
  <br>
  How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
  <br>
  <input type="submit" value="Submit">
  <br>
</form>

<div id="calculatedMonthlyCost"></div>

＆＃13;

如果您只想要2位小数，则可以更改此行：

calculatedMonthlyCost.innerHTML = (costs.weeklyCost).toFixed(2);

<强>演示：

＆＃13;

var calcCost = function  (costOfGas, vehicleMPG, numMiles) {
  var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
  var weeklyCost = dailyCost * 5;
  var monthlyCost = weeklyCost * 4;

  return {
    dailyCost: dailyCost,
    weeklyCost: weeklyCost,
    monthlyCost: monthlyCost
  };
}

document.forms[0].onsubmit = function(e) {
  e.preventDefault();
  var userCostOfGas = +document.forms[0].costOfGas.value;  // < Move these lines here and
  var userMPG = +document.forms[0].vehicleMPG.value;       // < add a plus sign before them
  var userNumMiles = +document.forms[0].numMiles.value;    // <
  var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
  var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
  calculatedMonthlyCost.innerHTML = (costs.weeklyCost).toFixed(2);
};

＆＃13;

<form>
  Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
  <br>
  Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
  <br>
  How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
  <br>
  <input type="submit" value="Submit">
  <br>
</form>

<div id="calculatedMonthlyCost"></div>

＆＃13;

表单提交时出现NaN错误

2 个答案: