如何让自定义游戏赔率计算器正常输出数字而非报解析错误？

我要制作一款计算游戏中出现概率的自定义计算器，但遇到分母无法正常输出的问题，报错信息如下：

The specified value "NaN" cannot be parsed, or is out of range. Multiply @ RoamingOdds.html:43 onclick @ RoamingOdds.html:66

初始代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Roaming Odds</title>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        var CharmMultiplier=1
        var BoostMultiplier=1
        function Multiply()
        {
            var Charm, Boost, RoamingAmount, Denominator, RoamingCalc, CharmMultiplier, BoostMultiplier;
            // checking to see if the user has charm or boost
            // having the charm halves the chance of finding a roaming (1/1024 becomes 1/512)
            
            switch(Charm) {
             case true:
                CharmMultiplier = 0.5
                break;
             case false:
                CharmMultiplier = 1
                break;
            default:
                CharmMultiplier = 1
            }  

            // having the boost decreases the chance by 4 (1/1024 becomes 1/256)
            // having both the boost and chance is supposed to make the odds go from 1/1024 to 1/128 (decreased by 8x)
            switch(Boost) {
             case true:
                BoostMultiplier = 0.25
                break;
             case false:
                BoostMultiplier = 1
                break;
            default:
                BoostMultiplier = 1
            }

            Result = 1024*CharmMultiplier*BoostMultiplier/RoamingAmount;
            document.RoamingCalc.Denominator.value=Result;

            

        }
    </script>
    <form name="RoamingCalc">
        <!-- all the factors to account for when calculating odds-->
        <label for="RoamingName">Roaming (optional):</label>
        <input type="text" id="RoamingName" name="RoamingName">

        <label for="Charm">Charm</label>
        <input type="checkbox" id="Charm">
        
        <label for="Boost">Boost</label>
        <input type="checkbox" id="Boost">

        <label for="RoamingAmount">Amount of Roamings Unlocked: </label>
        <input type="number" id="RoamingAmount" name="RoamingAmount">

        <label for="Denominator">Result: 1 in </label>
        <input type="number" id="Denominator" name="Denominator"><br>

        <input type="button" value="Calculate" onclick="Multiply()">


    </form>
    

</body>
</html>

问题根源 #

1. Charm、Boost变量从未获取页面复选框的状态，始终是undefined，导致switch判断完全失效，乘数无法正确设置
2. RoamingAmount没有获取输入框的值，计算时用undefined参与运算，直接得到NaN
3. 未处理输入为空的情况，可能出现除以0的错误

修正后可运行代码（3/12更新） #

<html lang="en">
<head>
    <title>Roaming Odds</title>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        var CharmMultiplier=1
        var BoostMultiplier=1
        function Multiply()
        {
            var Charm, Boost, RoamingAmount, Denominator, RoamingCalc, CharmMultiplier, BoostMultiplier;
            
            // checking to see if the user has charm or boost
            // having the charm halves the chance of finding a roaming (1/1024 becomes 1/512)
            
            if (document.getElementById("CharmID").checked){
                CharmMultiplier = 0.5 ;
            }else{
                CharmMultiplier = 1 ;
            }

            // having the boost decreases the chance by 4 (1/1024 becomes 1/256)
            // having both the boost and chance is supposed to make the odds go from 1/1024 to 1/128 (decreased by 8x)

            if (document.getElementById("BoostID").checked){
                BoostMultiplier = 0.25 ;
            }else{
                BoostMultiplier = 1 ;
            }
            
            if (document.getElementById("RoamingNameID"))

            RoamingAmount = Number(document.getElementById("RoamingAmountID").value) || 1;

            Result = 1024*BoostMultiplier*CharmMultiplier*RoamingAmount
         
            document.RoamingCalc.Denominator.value=Result;

            

        }
    </script>
    <form name="RoamingCalc">
        <!-- all the factors to account for when calculating odds-->
        <label for="RoamingNameID">Roaming (optional):</label>
        <input type="text" id="RoamingNameID" name="RoamingName">

        <label for="CharmID">Charm</label>
        <input type="checkbox" id="CharmID" name="Charm">
        
        <label for="BoostID">Boost</label>
        <input type="checkbox" id="BoostID" name="Boost">

        <label for="RoamingAmountID">Amount of Roamings Unlocked: </label>
        <input type="number" id="RoamingAmountID" name="RoamingAmount">

        <label for="DenominatorID">Result: 1 in </label>
        <input type="number" id="DenominatorID" name="Denominator"><br>

        <input type="button" value="Calculate" onclick="Multiply()">


    </form>
    

</body>
</html>

关键修改点 #

• 给页面元素添加了带ID后缀的唯一标识，通过document.getElementById()正确获取输入状态和值
• 用if-else替代switch，更简洁地判断复选框选中状态，设置对应的乘数
• 处理RoamingAmount空值情况，默认设为1，避免NaN
• 调整计算逻辑，确保结果为有效数字，能正确输出到输入框

内容的提问来源于stack exchange，提问作者Matthattan