比 Js 中的 bug 更重要

Question

我遇到了一個奇怪的錯誤，在我的游戲中，您輸入的猜測值大於 maxNum，例如 8 作為猜測值，輸入的 maxNum 為 10。游戲應該認為 8 大於 10。代碼的問題來自checkGuess function。 我不知道這是否是因為我使用了全局變量。

<!DOCTYPE html>
<html>
    <head>
        <style>
            #hi-LowBody{
                text-align: center;
            }
            #nameErrorMsg{
                color: red;
            }
            #maxGuessError{
                color: red;
            }
            #guessError{
                color: red;
            }
        </style>
        <script>
 var nameEnteredInput; 
        var maxNum=0; 
        var minNum=1; 
        var randomNumber=0; 
   

        //Function   :nameEnter()
        //Parameters : void
        //Return     : 
        //Description: This function is the onclick and will check 
        function nameEntered()
        {
            nameEnteredInput=document.getElementById('enterNameInput').value;
            if(nameCheck(nameEnteredInput)==true)
            {
                document.getElementById('enterNameDiv').style.display="none";   
                document.getElementById("maxGuessRangeDiv").style.display="block"; 
                 

                document.getElementById('promptByName').innerHTML="Hello <b>"+this.nameEnteredInput+"</b> please enter the maximum number for the game";     
            } 
        }

        //Function   : nameCheck()
        //Parameters : name
        //Return     : returns true if the name entered is not blank. Returns false if the name is blank or null
        //Description: This function will check the name entered to make sure it is not blank or null
        function nameCheck(name)
        {
            if(name==null||name==""){
                document.getElementById('nameErrorMsg').innerHTML='The name can not be blank. '; 
                
                return false; 
            }
            else{
                return true; 
            }
            
        }

        //Function   : maxNumberCheck()
        //Parameters :
        //Returns    : returns the next prompt or a error 
        //Description: This function will check and make sure that the number entered from the user is greater than 1. This function will also create the random number 
        function maxNumberCheck()
        {
            maxNum=document.getElementById('maxGuessRange').value; 
            if(maxNum<1)
            {
                document.getElementById("maxGuessError").innerHTML="The number you entered is less then 1 and is not allowed"; 
            }
            else 
            {
                randomNumber=Math.floor(Math.random() * maxNum);
                document.getElementById('maxGuessRangeDiv').style.display='none'; 
                document.getElementById('guessDiv').style.display='block'; 

                document.getElementById('promptUserToGuess').innerHTML='Please enter a guess from 1 - '+this.maxNum; 
            }
        }

        //Function   : makeGuess()
        //Parameters : void
        //Returns    : 
        //Description: This function will allow the user to make a guess
        function makeGuess()
        {
            var guess=0; 
            guess=document.getElementById('guess1').value;
           
            document.getElementById('promptUserToGuess').style.display='none';

            if(checkGuessIsMin(guess)==false) return; 
            else
            {
                //two change range function
                //1 for when the guess is greater than the random number
                //2 for when the guess is less than the random number 
                // winner screen when the user guess the correct number

            }
        }

        
        //Function   :
        //Parameters :
        //Returns    :
        //Description: 

        
      

        //Function   : checkGuessIsMin
        //Parameters : guess
        //Returns    : returns true if the number is greater than minNum
        //Description: Checks if the number is greater than the minNum 
        function checkGuessIsMin(guess)
        {
            var max=maxNum; 
            var min=minNum; 
            var guessEntered=guess; 

            if(guessEntered<minNum)
            {
                document.getElementById('guessError').innerHTML='ERROR...The number you have entered is less than <b> '+minNum+ '</b>'; 
                return false; 
            }
            else if(guessEntered>maxNum)
            {
                console.log('The guess is greater'); 
                return false; 
            }
            else return true; 
          
        }

       

        </script>
    </head>
    <body id="hi-LowBody">
        <h1 id="gameTitle">Hi-Low Game</h1>
        <!--Enter name div-->
        <div id="enterNameDiv">
            <p id="nameErrorMsg"></p>
            <label for="enterNameInput">Name:</label>
            <input type="text" id="enterNameInput">
            <input type="button" value="Submit" onclick="nameEntered()">
        </div>

        <!--Enter max guess range -->  
         <div id="maxGuessRangeDiv" hidden>
            <p id="promptByName"></p>
            <p id="maxGuessError"></p>
            <label for="maxGuessRange">Max Guess Range</label>
            <input type="number" id="maxGuessRange">
            <input type="button" value="Submit" onclick="maxNumberCheck()"> 
        </div>

        <!--This is the guess prompt -->
        <div id="guessDiv" hidden>
            <p id="promptUserToGuess"></p>
            <p id="guessError"></p>
            <label for="guess">Guess:</label>
            <input type="number" id="guess1">
            <input type="button" value="Make Guess" onclick="makeGuess()">
        </div>


    </body>
</html>

Answer 1

您從輸入value獲得的值始終是字符串（文本）。 為了獲得正確的數字，如果您需要整數，請使用parseInt ，或者如果您需要浮點數，請使用parseFloat 。

對於您的具體情況，代碼可能如下所示：

maxNum = parseInt(document.getElementById('maxGuessRange').value, 10);

請注意始終明確設置數字基參數（本示例中的10表示十進制），因為默認行為在未給出參數時是不安全的，並且很容易與八進制和其他數字系統混淆。

該錯誤來自這樣的代碼，當比較字符串而不是數字時，結果為true ：

'10' < '8'

請始終將用戶輸入解析為正確的數字類型，以避免意外強制。

比 Js 中的 bug 更重要

問題描述

1 個解決方案

解決方案1
3 已采納 2022-09-12 23:31:58

比 Js 中的 bug 更重要

問題描述

1 個解決方案

解決方案1 3 已采納 2022-09-12 23:31:58

解決方案1
3 已采納 2022-09-12 23:31:58