I am getting a weird bug where in my game, where you enter a guess that is greater than the maxNum like 8 as the guess and the maxNum entered is 10. The game is supposedly think 8 is greater than 10. The issue with the code is coming from the checkGuess function. I have no idea if it is cause I am using global variables.
<!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>
CodePudding user response：
The value you get from input value is always a String (text). In order to get a proper number, please use parseInt if you expect integers, or parseFloat for floating point numbers.
For your specific case, the code could look like this:
maxNum = parseInt(document.getElementById('maxGuessRange').value, 10);
Please be aware to always set the number base parameter explicitly (10 in this example means decimal) because the default behavior, when no parameter is given, is unsafe and can be easily confused with octal and other number systems.
The bug comes from the code like this, which results in true when strings are compared instead of numbers:
'10' < '8'
Please always parse user input to proper number types to avoid unexpected coercions.