Question

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

它有效，但最终价格总是以'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>

Answer 1

daysInputted未分配号码，因此它是undefined，因此您与undefined相乘，因此NaN

Answer 2

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

<强> 1 即可。在此代码中，您的var daysInputted和var gamePrice都是本地。

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

您可能会考虑首先调用idToPrice()方法，因此必须定义gamePrice。但事实并非如此。

因为当你在方法中说var gamePrice时，gamePrice成为该方法的局部变量，并且无法通过任何其他方法访问它。

因此，您需要在同一方法中定义两个变量，或者在idToPrice()方法中将它们设为 global 。

<强> 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>

Answer 3

发现问题
变量没有获得价值，
没有使用parseInt（）来获取整数值
完整的代码经过修改，测试并100％正常工作


    <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();">Reserve!</button>

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

    <script>
        function idToPrice() {

            var id = parseInt(document.getElementById("gameID").value);
            var days = parseInt(document.getElementById("daysReserved").value);
            if(!isNaN(id))
            {
                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;
                }
                finalPriceCalculation(id,days);
            }
            else {
                document.getElementById("totalPriceOutput").innerHTML = "Error. Your final price could not be calculated because you selected an invalid game ID.";
            }
        }

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

            document.getElementById("totalPriceOutput").innerHTML = "Your final price is £" + finalPrice + ".";
        }

        </script>

Answer 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>

在尝试计算价格时出现NaN

4 个答案: