尝试计算价格时出现 NaN答案

【问题标题】：NaN appears when trying to calculate price尝试计算价格时出现 NaN
【发布时间】：2015-07-04 14:07:22
【问题描述】：

我是编程新手，正在尝试创建一个简单的数学脚本来确定用户选择的游戏价格，并将其乘以他们希望预订游戏的天数。

它有效，但最终价格始终显示为“NaN”（我认为它代表“非数字”）。

任何帮助将不胜感激。

<html>

<body>

  <p><strong>Game ID</strong><br>   
  <input type="number" name="gameID" id="gameID" placeholder="1-8">

<p><strong>Days you wish to reserve the game for</strong><br>
  <input type="number" name="daysReserved" id="daysReserved" placeholder="1-5">

<br>

<button type="button" onclick="idToPrice();finalPriceCalculation();">Reserve!</button>

<p id="totalPriceOutput"></p>

<script>
function idToPrice() {

var id = document.getElementById("gameID").value;

if (id == 1) {
var gamePrice = 0.99;
} else if (id == 2) {
var gamePrice = 0.99;
} else if (id == 3) {
var gamePrice = 1.99;
} else if (id == 4) {
var gamePrice = 1.99;
} else if (id == 5) {
var gamePrice = 3.99;
} else if (id == 6) {
var gamePrice = 3.99;
} else if (id == 7) {
var gamePrice = 0.99;
} else if (id == 8) {
var gamePrice = 0.99;
} else {
document.getElementById("totalPriceOutput").innerHTML = "Error. Your final price could not be calculated because you selected an invalid game ID.";
}
}

function finalPriceCalculation() {
var daysInputted;
var gamePrice;
var finalPrice = daysInputted * gamePrice;

document.getElementById("totalPriceOutput").innerHTML = "Your final price is &pound;" + finalPrice + ".";
    }
</script>

</body>

</html>

【问题讨论】：

您似乎没有将 ID 为 daysReserved 的输入值分配给您的 daysInputted 变量。

标签： javascript nan

【解决方案1】：

注意：您的代码中有 3 个问题。我已将它们全部更正，并使用switch case 语句修改了条件以提高可读性。

1。在您的此代码中，您的var daysInputted 和var gamePrice 都是本地。

var daysInputted;
var gamePrice;
var finalPrice = daysInputted * gamePrice;

当您首先调用idToPrice() 方法时，您可能会想，所以必须定义gamePrice。但事实并非如此。

因为当您在方法中使用var gamePrice 时，gamePrice 将成为该方法的局部变量，并且无法在任何其他方法中访问。

因此，您要么需要在同一方法中定义这两个变量，要么在 idToPrice() 方法中将它们全局。

2。您还需要将daysInputted 定义为

var daysInputted = document.getElementById("daysReserved").value;

3。你还需要解析 document.getElementById("gameID").value 到 Integer

您的最终代码完全可以工作的代码将是

<body>

  <p><strong>Game ID</strong><br>   
  <input type="number" name="gameID" id="gameID" placeholder="1-8">

<p><strong>Days you wish to reserve the game for</strong><br>
  <input type="number" name="daysReserved" id="daysReserved" placeholder="1-5">

<br>

<button type="button" onclick="idToPrice();finalPriceCalculation();">Reserve!</button>

<p id="totalPriceOutput"></p>

<script>
function idToPrice() {

    var id = parseInt(document.getElementById("gameID").value);

    switch(id) {
        case 1:
            gamePrice = 0.99;
            break;
        case 2:
            gamePrice = 0.99;
            break;
        case 3:
            gamePrice = 1.99;
            break;
        case 4:
            gamePrice = 1.99;
            break;
        case 5:
            gamePrice = 3.99;
            break;
        case 6:
            gamePrice = 3.99;
            break;
        case 7:
            gamePrice = 0.99;
            break;
        case 8:
            gamePrice = 0.99;
            break;
        default:
            document.getElementById("totalPriceOutput").innerHTML = "Error. Your final price could not be calculated because you selected an invalid game ID.";
            break;
    }
}

function finalPriceCalculation() {
    var daysInputted = document.getElementById("daysReserved").value;
    var finalPrice = daysInputted * gamePrice;

    document.getElementById("totalPriceOutput").innerHTML = "Your final price is &pound;" + finalPrice + ".";
}
</script>

</body>

【讨论】：

@MrRetroDinosaur 很好。我希望您将答案标记为正确:) 一切顺利

【解决方案2】：

daysInputted 没有被分配一个数字，所以它是undefined，所以你乘以undefined，因此NaN

【讨论】：

【解决方案3】：

发现问题
变量没有得到值，
没有使用 parseInt() 来获取整数值
完整的代码修改、测试和工作 100 %

游戏 ID

您希望保留游戏的天数

函数 idToPrice() { var id = parseInt(document.getElementById("gameID").value); var days = parseInt(document.getElementById("daysReserved").value); 如果（！isNaN（id）） { 如果（id == 1）{ var gamePrice = 0.99; } else if (id == 2) { var gamePrice = 0.99; } else if (id == 3) { var 游戏价格 = 1.99; } else if (id == 4) { var 游戏价格 = 1.99; } else if (id == 5) { var 游戏价格 = 3.99; } else if (id == 6) { var 游戏价格 = 3.99; } else if (id == 7) { var gamePrice = 0.99; } else if (id == 8) { var gamePrice = 0.99; } finalPriceCalculation(id,days); } 别的 { document.getElementById("totalPriceOutput").innerHTML = "错误。您的最终价格无法计算，因为您选择了无效的游戏 ID。"; } } 函数 finalPriceCalculation(gamePrice,daysInputted) { var daysInputted; var finalPrice = parseInt(daysInputted) * parseInt(gamePrice); document.getElementById("totalPriceOutput").innerHTML = "你的最终价格是£" + finalPrice + "."; } 脚本>

【讨论】：

【解决方案4】：

你的 JS 代码可能是：

function idToPrice() {
 var id = document.getElementById("gameID").value,
     gamePrice, daysInputted, finalPrice; //It is a good practice to define variables at the top of the function, check "variable hoisting".
 if (id === 1) { // It is a good practice to use "===" for checking value and type
   gamePrice = 0.99;
 } else if (id === 2) {
   gamePrice = 0.99;
 } else if (id === 3) {
   gamePrice = 1.99;
 } else if (id === 4) {
   gamePrice = 1.99;
 } else if (id === 5) {
   gamePrice = 3.99;
 } else if (id === 6) {
   gamePrice = 3.99;
 } else if (id === 7) {
   gamePrice = 0.99;
 } else if (id === 8) {
   gamePrice = 0.99;
 }
 if (gamePrice) {
   daysInputted = document.getElementById("daysReserved").value || 0;
   finalPrice = daysInputted * gamePrice;
 }

 if (finalPrice) {
   document.getElementById("totalPriceOutput").innerHTML = "Your final price is &pound;" + finalPrice + ".";
 } else {
   document.getElementById("totalPriceOutput").innerHTML = "Error. Your final price could not be calculated because you selected an invalid game ID.";
 }
}

还有，您的 HTML 代码：

<button type="button" onclick="idToPrice()">Reserve!</button>

【讨论】：