CMBrink88
CMBrink88

Reputation: 23

Javascript number guessing game displaying issues

I have a Javascript assignment where we need to use loops to create a counting betting game. The User enters a number and the computer randomly selects a number between 1-10, and the user can bet up to 10 points to win. We need to display the number the computer guessed, the number of turns(up to 100), and the user's points. I'm having issues with getting the items to display on the webpage and at this time I am showing no errors.

var randomNumber = Math.floor(Math.random() * 10) + 1;
var userNumber = document.getElementById("userNumb");
var points = 10;
var turns = 1;
var bet = document.getElementbyID("userBet");

if (userNumber <= 0 || userNumber >= 11) { // checks to see if user entered a number between 1 and 10
  alert("Please enter a number between 1 and 10!");
  return false;
}

if (bet <= 0 || bet > 10) { // Checks to see if user entered a bet between 1 and 10
  alert("Please enter a bet!");
  return false;
}

function numberGuess() {
  if (userNumber === randomNumber) { //Compares User's number to computer generated number
    points = points + (bet * 10);
    turns++;
  } else {
    points = points - bet;
    turns++;
  }


  if (turns == 100 || points = < 0) { //Game over statement
    alert("GAME OVER! Final points count: " + points);
  }
}
<h1>The Number Guessing Game!</h1>
<p>Welcome to the number guessing game! <br/> In this game you will guess a number between 1 and 10 in the box below. <br/> You start with 10 points and can bet up to 10 points every round.<br/> If you guess the right number, your winnings is 10x your bet!<br/>  Game is over when you lose all your points or 100 rounds have passed.<br/> Good luck!</p>
<form>

  <br/>
  <p>Please select a number between 1 and 10: <input type="text" id="userNumb"><br /> Please place a bet on your points between 1 and 10: <input type="text" id="userBet" /><br /> The Number the Computer chose is : <output type="text" id="randomNumber" /><br
    /> Current Points: <output type="text" id="points" /> <br /> Round #: <output type="text" id="turns" /> </p>
  <button onclick="numberGuess()">Click here for result</button>
</form>

Upvotes: 0

Views: 96

Answers (2)

CMBrink88
CMBrink88

Reputation: 23

This is an edited version of Tnc Andrei's code. After applying the code it properly displayed in the console. Changed the console.log to

document.getElementById("randomNumber").innerHTML = randomNumber;

in order to have the items displayed properly. I also had to move a few variables into the function to change the random number every click.

HTML

<h1>The Number Guessing Game!</h1>
<p>Welcome to the number guessing game! <br/> In this game you will guess a number between 1 and 10 in the box below. <br/> You start with 10 points and can bet up to 10 points every round.<br/> If you guess the right number, your winnings is 2x your bet!<br/>  Game is over when you lose all your points or 100 rounds have passed.<br/> Good luck!</p>
        <form>

        <br/>
        <p>Please select a number between 1 and 10: <input type="text" id="userNumb"><br /> Please place a bet on your points between 1 and 10: <input type="text" id="userBet" /><br /> The Number the Computer chose is : <output  id="randomNumber" ></output><br /> Current Points: <output  id="points" ></output> <br /> Round #: <output id="turns" ></output> </p>
        <button type="button" onclick="numberGuess()">Click here for result</button>
    </form>

Javascript

var points = 10;
var turns = 1;

function checkNumbers(userNumber, bet) {
  var check = {};

  if (userNumber <= 0 || userNumber >= 11) { // checks to see if user entered a number between 1 and 10
    return { error: true, message: "Please enter a number between 1 and 10!"};
  }

  if (bet <= 0 || bet > 10) { // Checks to see if user entered a bet between 1 and 10
    return { error: true, message: "Please enter a bet!" };
  }
  return { error: false, message: 'OK'};
}


function numberGuess() {
  var randomNumber = Math.floor(Math.random() * 10) + 1;
  var bet = document.getElementById("userBet").value;
  var userNumber = document.getElementById("userNumb").value;
  var check =  checkNumbers(userNumber, bet);

  if(check.error) {
    alert(check.message);
    return;
  }

  if (userNumber == randomNumber) { //Compares User's number to computer generated number
    points = points + (bet * 2);
    turns++;
  } else {
    points = points - bet;
    turns++;
  }
  console.log(points, turns);

  if (turns === 100 || points <= 0) { //Game over statement
    alert("GAME OVER! Final points count: " + points);
  }

    document.getElementById("randomNumber").innerHTML = randomNumber;
    document.getElementById("points").innerHTML = points;
    document.getElementById("turns").innerHTML = turns;
}

Upvotes: 1

Tnc Andrei
Tnc Andrei

Reputation: 1012

Try This

var randomNumber = Math.floor(Math.random() * 10) + 1;
var points = 10;
var turns = 1;

function checkNumbers(userNumber, bet) {
  var check = {};
  
  if (userNumber <= 0 || userNumber >= 11) { // checks to see if user entered a number between 1 and 10
    return { error: true, message: "Please enter a number between 1 and 10!"};
  }

  if (bet <= 0 || bet > 10) { // Checks to see if user entered a bet between 1 and 10
    return { error: true, message: "Please enter a bet!" };
  }
  return { error: false, message: 'OK'};
}


function numberGuess() {
  var bet = document.getElementById("userBet").value;
  var userNumber = document.getElementById("userNumb").value;
  var check =  checkNumbers(userNumber, bet);
  
  if(check.error) {
    console.log(check.message)
    return;
  }
  
  if (userNumber === randomNumber) { //Compares User's number to computer generated number
    points = points + (bet * 10);
    turns++;
  } else {
    points = points - bet;
    turns++;
  }
  console.log(points, turns);

  if (turns === 100 || points <= 0) { //Game over statement
    console.log("GAME OVER! Final points count: " + points);
  }
}
<h1>The Number Guessing Game!</h1>
<p>Welcome to the number guessing game! <br/> In this game you will guess a number between 1 and 10 in the box below. <br/> You start with 10 points and can bet up to 10 points every round.<br/> If you guess the right number, your winnings is 10x your bet!<br/>  Game is over when you lose all your points or 100 rounds have passed.<br/> Good luck!</p>
<form>

  <br/>
  <p>Please select a number between 1 and 10: <input type="text" id="userNumb"><br /> Please place a bet on your points between 1 and 10: <input type="text" id="userBet" /><br /> The Number the Computer chose is : <output type="text" id="randomNumber" /><br
    /> Current Points: <output type="text" id="points" /> <br /> Round #: <output type="text" id="turns" /> </p>
  <button type="button" onclick="numberGuess()">Click here for result</button>
</form>

Upvotes: 0

Related Questions