Javascript猜数字游戏显示问题

Question

我有一个 Javascript 任务，我们需要使用循环来创建一个计数投注游戏。用户输入一个数字，计算机在1-10之间随机选择一个数字，用户最多可以下注10分中奖。我们需要显示计算机猜到的数字、圈数（最多 100 圈）和用户的分数。我在让项目显示在网页上时遇到问题，目前我没有显示任何错误。

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>

Answer 1

这是 Tnc Andrei 代码的编辑版本。应用代码后，它正确显示在控制台中。将 console.log 更改为

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

为了让项目正确显示。 我还必须将一些变量移动到函数中以更改每次点击的随机数。

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;
}

Answer 2

试试这个

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>