Number guessing game in JS

问题:

I want to create a number game where the user enters a number from 1-100, and it the script will attempt to guess in 10 guesses the user's input. If within 10 guesses it guesses the right number it wins, otherwise the user wins. So far I got it work properly, except I'm having issues trying to have it display the number of guesses made at the end of the game. So for example, if 10 guesses were made than it should show "Number of guesses made: 10" or Number of guesses made: 5" (if guessed in 5).

window.guessNum = function () {
    document.getElementById("result").innerHTML = "";
    var guesses = 10;
    var input = parseInt(document.getElementById("numberGuess").value);
    do {
        var randomNum = Math.floor(Math.random() * 100) + 1;
         
        document.getElementById("result").innerHTML += "I'll guess " + randomNum + " <br />";
        if (input == randomNum) {
        document.getElementById("result").innerHTML += "Our numbers match. I win!! :)<br /><br />";
        guesses = 0;
       }
       if (input < randomNum) {
       document.getElementById("result").innerHTML += "Your input is less than the number I'm thinking about. <br /><br />";
       } else if (input > randomNum) {
       document.getElementById("result").innerHTML += "Your input is greater than the number I'm thinking about.<br /><br />";
       }
       guesses = guesses - 1;
       }
       while (guesses > 0);
       if (input != randomNum) {
       document.getElementById("result").innerHTML += "I can't figure it out. I guess you win!<br /><br />";
       }
       document.getElementById("result").innerHTML += "Number of guesses: " +guesses+ " <br />";
    }

<h1>Number Game</h1>
<div id="mainCont">
  <p>Number:
    <input type="text" id="numberGuess">
    <input type="button" onclick="guessNum();" value="Guess">
  </p>
  <div id="guess"></div>
  <div id="result"></div>
</div>

回答1:

You have to calculate a new random number in every loop (not just at the beginning)

回答2:

The first one i noticed was the below line was out of the loop

 var randomNum = Math.floor(Math.random() * 100) + 1;

and then the below line was not there if the numbers were equal, so it went to recurring loop.

guesses = guesses - 1;

and for show the guess and its result one after another it , i appended all the result to single div

see the below working demo:

window.guessNum = function () {
    document.getElementById("result").innerHTML = "";
    var guesses = 10;
    var input = parseInt(document.getElementById("numberGuess").value);
    do {
        //guesses--;
          var randomNum = Math.floor(Math.random() * 100) + 1;
        document.getElementById("result").innerHTML += "<p>I 'll guess " + randomNum + " </p>";

        if (input < randomNum) {
            document.getElementById("result").innerHTML += "<p>Your input is less than the number I'm thinking about. </p>";
        } else if (input > randomNum) {
            document.getElementById("result").innerHTML += "<p>Your input is greater than the number I'm thinking about.</p> ";
        }
         guesses = guesses - 1;
    }
    while (guesses > 0);
    if (input != randomNum) {
        document.getElementById("result").innerHTML += "<p>I can 't figure it out. I guess you win!</p>";
    }
    if (input == randomNum) {
        document.getElementById("result").innerHTML += "<p>Our numbers match. I win!! :)</p>";
        guesses = 0;
    }
}

<h1>Number Game</h1>

<div id="mainCont">
    <p>Number:
        <input type="text" id="numberGuess">
        <input type="button" onclick="guessNum();" value="Guess">
    </p>
    <div id="guess"></div>
    <div id="result"></div>
</div>

Demo : http://jsfiddle.net/kishoresahas/j0bbnhue/4/