Reputation: 23
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
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
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