How to make my calculator print numbers instead of getting a parsing error?-CodePudding

I've been wanting to make a custom calculator for finding odds in a game but I'm running into a problem with having the denominator printing

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

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

I've tried rewriting line 43 since thats what keeps on highlighting but Im new to Javascript so Im probably doing a terrible job at it

CodePudding user response：

I hope it's correct but the problem is that RoamingAmount is undefined. You should give it a value. NaN is the result of a number through undefined. Like follows:

console.log(1/undefined);

CodePudding user response：

You are not getting the information from the input. In your case:

RoamingAmount = Number(document.getElementById('RoamingName').value) || 1;

You use document.getElementById('#id') to select the element. After that, .value to get the value inside the input as text, and finally wrap everything in Number() to make it a number and being able to calculate. As you are using for a division, using the ternary || 1 will make the number 1 for not affecting the result with an invalid or empty value

Result:

<!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
            }
            
            RoamingAmount = Number(document.getElementById('RoamingName').value) || 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>