Number Guessing Game Program Build with JavaScript

Question

I'm trying to build a guessing game, where the computer automatically generates a number between 1-100 and the user has 5 chances to guess the number. Between guesses I want to clear the input field. There is a hint button that can tell the user "lower" or "higher" and there is a div that shows how many guesses are remaining. There is also a play again button.

I've built the html, css and some of the JS but I'm getting stuck with a for loop.

The JS/HTML is:

<input type="text" id="playersGuess" placeholder="Input Number 1-100" class="form-control input" >
<h3 id="status"></h3>
<button onclick='playersGuessSubmission()' type="button" id="playersGuess"class="btn btn-lg btn-info submit">Submit Your Guess</button>


var playersGuess,
    winningNumber

// Generate the Winning Number

function generateWinningNumber(){
    winningNumber = Math.floor(Math.random() * 100);
    console.log(winningNumber);
}

generateWinningNumber();

// Fetch the Players Guess

function playersGuessSubmission(){
    playersGuess = parseInt($('#playersGuess').val());
    console.log(playersGuess);
    lowerOrHigher();
}

// Determine if the next guess should be a lower or higher number

function lowerOrHigher(){
    var guessesRemaining=5;
    for(i=guessesRemaining; i>0; i-- ) {
        if (playersGuess > winningNumber){
            console.log('lower');
            guessesRemaining -= 1;
            // $('remaining span').html(guessesRemaining);
            console.log(guessesRemaining);
            // return;
            // playersGuessSubmission()
        } else if (playersGuess < winningNumber) {
            console.log('higher');
            guessesRemaining -= 1;
            // $('remaining span').html(guessesRemaining);
            console.log(guessesRemaining);
            // return;
            // playersGuessSubmission()
        } else {
            console.log('you win')
            return;
        }
    }
}

Currently, the computer generates a random number, the user is able to guess, and then the user runs through the loop console.logging out remaining guesses down to 0 without allowing the user to input any other guesses. Adding the return line in each 'if' statement ends the loop and the remaining guesses never decreases and the user is able to input infinitely until they guess correctly. Adding the playersGuessSubmission() function to each 'if' statement results in an infinite loop.

I'm new to learning JS (and doing it on my own) so any guidance is truly appreciated! Thanks in advance.

See JSFiddle here: http://jsfiddle.net/njpatten/qo1d63da/1/ Feel free to change console.log to alerts or replace div text.

1) add type="button" 2) use HEAD in the fiddle and not onload: $(function() { $("#playersGuess").on("click",function(e) { e.preventDefault(); playersGuessSubmission(); }); }); — mplungjan
– mplungjan, Commented Dec 15, 2015 at 16:03
One tip I would give you is setting for each button an unique ID. Otherwise you would get conflicting code. Additionally, within HTML the use of a specific name ID is only allowed once. If you want to use the same name more often then add it as a class. Another tip I would give you is to use jQuery handles as the click function instead of calling a function inline. I might try to fix your code later on — Rotan075
– Rotan075, Commented Dec 15, 2015 at 16:05

PeterTheLobster · Accepted Answer · 2015-12-15 16:10:06Z

Instead of using a for loop I would recommend to use a global variable to keep track of remaining guesses and decrement it by 1 each time the user takes a guess and the remainingGuesses > 0. Your way does not wait for user input but rather checks the same value 5 times in a row. Something like this should work:

var guessesRemaining = 5;
function lowerOrHigher(){

    if (guessesRemaining > 0){
        guessesRemaining--;
        if (playersGuess > winningNumber){
            console.log('lower');
            // $('remaining span').html(guessesRemaining);
            console.log(guessesRemaining);
        } else if (playersGuess < winningNumber) {
            console.log('higher');
            // $('remaining span').html(guessesRemaining);
            console.log(guessesRemaining);
        } else {
            console.log('you win')
            return;
        }
    }
    else {
         console.log('You ran out of guesses');
    }
}

Community · Accepted Answer · 2020-06-20 09:12:55Z

Not exactly sure if this would solve your problem, but going through the issues one at a time:

1:

I think the player runs out of guesses, because you loop for the number of guess decreasing the number of guesses each time, so the loop continues until the guesses are zero basically.

2:

If you add the return statement, the user's guesses never goes down because each time the button is pressed you call the lowerOrHigher() function again and you are setting guesses equal to five in the function

3:

For this exact same reason you get an infinite loop for calling the playerGuessSubmission() function, because the playerGuessSubmission() function calls lowerOrHigher() which in turn sets user guesses to five, allowing the loop to run again, calling playerGuessSubmission again, etc, etc

What I would do, is create an onload function with your jquery setting the initial number of guesses to five when the page loads:

$( document ).ready(function() {
    guessesRemaining = 5;
});

And then only reset guessesRemaining = 5 when you call the PlayAgain() function as indicated in your JSFiddle, which I assume will be an "onclick" of the Play Again button:

function playAgain(){
    guessesRemaining = 5;
}

From there I would remove the for loop completely, so that the lowerOrHigher() is called on button click only, and decides each time the button is clicked whether or not he guessesRemaining -= 1, or to console.log("You Won").

M.James · Accepted Answer · 2015-12-15 16:12:36Z

0

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
  </head>

  <body>
    <input type="text" id="playersGuess" placeholder="Input Number 1-100" class="form-control input" >
<h3 id="status"></h3>
<button onclick='playersGuessSubmission()' type="button" id="playersGuess"class="btn btn-lg btn-info submit">Submit Your Guess</button>

<script>
var playersGuess,
    winningNumber



// Fetch the Players Guess

function playersGuessSubmission(){
    winningNumber = Math.floor(Math.random() * 100);
    console.log(winningNumber +"winning");
    playersGuess = parseInt($('#playersGuess').val());
    console.log(playersGuess+ "guess");

    if(playersGuess <winningNumber)
    {
      console.log("guess higher");
    }

       else if(playersGuess >winningNumber)
    {
      console.log("guess lower");
    }

    else
    {
      console.log("correct");
    }

    $('#playersGuess').val('');

}

// Determine if the next guess should be a lower or higher number

function lowerOrHigher(){

}</script>
  </body>

</html>

answered Dec 15, 2015 at 16:12

M.James

216 bronze badges

1 Comment

M.James Over a year ago

This works. Make it better by adding functions and putting in your guesses, a simple counter decremented. Play again button just puts guesses back to 5

mplungjan · Accepted Answer · 2015-12-15 16:23:42Z

Here is my suggestion

I changed the IDs of the buttons, they must be different and not the same as other variable names

DEMO

/* **** Global Variables **** */
// try to elminate these global variables in your project, these are here just to start.

var playersGuess, winningNumber, guessesRemaining;



/* **** Guessing Game Functions **** */

// Generate the Winning Number

function generateWinningNumber() {
  winningNumber = Math.floor(Math.random() * 100);
  guessesRemaining=5;
  console.log(winningNumber);
  $('#remaining').html(guessesRemaining+" left");       
}



// Fetch the Players Guess

function playersGuessSubmission() {
  playersGuess = parseInt($('#playersGuess').val(),10);
  console.log(playersGuess);
  lowerOrHigher();
}

// Determine if the next guess should be a lower or higher number

function lowerOrHigher() {
    guessesRemaining--;
    if (guessesRemaining<=0) {
      $('#remaining').html("You lose");        
      return;
    }  
    if (playersGuess > winningNumber) {
      console.log('lower');
      console.log(guessesRemaining);
      $('#remaining').html("too high "+guessesRemaining+" left");        
    } else if (playersGuess < winningNumber) {
      console.log('higher');
      $('#remaining').html("too low "+guessesRemaining+" left");        
    } else if (playersGuess == winningNumber) {
      $('#remaining').html("you win "+guessesRemaining+" left"); 
      guessesRemaining=0;
    }
    else {
      $('#remaining').html(playersGuess + " is not valid, "+guessesRemaining+" left"); 
    }
}

//continues to console.log false, een when the winning number is set to 24


// Check if the Player's Guess is the winning number 

function checkGuess() {
  // add code here
}

// Create a provide hint button that provides additional clues to the "Player"

function provideHint() {
  // add code here
}

// Allow the "Player" to Play Again

function playAgain() {
  // add code here
  generateWinningNumber();
}


/* **** Event Listeners/Handlers ****  */


$(function() {
  generateWinningNumber();
  $("#playersGuessBut").on("click",function(e) {
    e.preventDefault();
    playersGuessSubmission();
  });
  $("#playAgain").on("click",playAgain);
});

Mogsdad · Accepted Answer · 2016-04-20 02:16:18Z

0

I'm new to learning JS (and doing it on my own) so any guidance is truly appreciated!

I suggest you to learn javascript using something like : Codeschool they have good javascript learning path for newcomers and basic courses are free. or Coursera

According this

Adding the return line in each 'if' statement ends the loop and the remaining guesses never decreases and the user is able to input infinitely until they guess correctly

You define number of guesses in beggining of function. So every time you enter in it will be asigned with initial value (5).

edited Apr 20, 2016 at 2:16

Mogsdad

46k21 gold badges167 silver badges289 bronze badges

answered Dec 15, 2015 at 16:09

Dmitry Stukalov

1921 silver badge13 bronze badges

1 Comment

njpatten Over a year ago

Thanks! Yes, I've gone through CodeSchool, Codeacademy and Treehouse and this is a project I've been given to try to practice those skills.

Collectives™ on Stack Overflow

Number Guessing Game Program Build with JavaScript

5 Answers 5

Comments

1:

2:

3:

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1:

2:

3:

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related