Simple guessing game

debugcn Published at Dev

Ryan Robertson

I am trying to make a simple guessing number game. I cannot get the function to operate correctly, or display my messages to the user. Am I not using the innerHTML correctly? I also want the game to reload when the number is guessed correctly, I am not sure if it works because the game will not operate.

var number = 0;
var output = document.getElementById("output").innerHTML;

function pickInteger() {
  "use strict";
  number = Math.floor(Math.random() * 10 + 1);
}

function checkGuess() {
  "use strict";
  var guess = document.getElementById("guess").value;
  if (guess == number) {
    alert(number + " " + "Is the correct number!");
    output = "";
    pickInteger();
  }
  if (guess < number); {
    output = "The number I am thinking of is higher than" + guess;
  } else if (guess > number); {
    output = "The number I am thinking of is lower than" + guess;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="utf-8">
  <title>Guess the Number</title>
  <link rel="stylesheet" href="css/Lab6.css" />
  <script type="text/javascript" src="script/Lab6.js"></script>
</head>

<body onload="pickInteger()">
  <div>
    <h2><strong>Guess the Number</strong></h2>
  </div>
  <br/>
  <div id="formDiv">
    <form name="AForm" method="get">
      <p>The computer has picked a number between 1 - 99, you must choose the correct number to win the game. When you guess the right number the game will restart.<br/>
      </p>
      <div id="bodyDiv">
        <p> Your guess is:
          <input id="guess" type="text" size="1" name="theData" value="" autofocus/>
          <input type="button" name="mybutton" value=" Guess " onclick="checkGuess()">
        </p>
        <p id="output">
        </p>
      </div>
    </form>
  </div>
</body>

</html>

Reborn

you had a semicolon if (guess < number); and else if (guess > number); which is wrong just remove it and it will start working, see below your code

var number = 0;
var output = document.getElementById("output").innerHTML;
var consolecounter = 0;

function pickInteger() {
  "use strict";
  number = Math.floor(Math.random() * 10 + 1);
}


$(document).ready(function() {
  pickInteger();
  $("form[name='AForm']").on('submit', function(e) {
    "use strict";
    e.preventDefault();
    var guess = parseInt(document.getElementById("guess").value);
    if (guess == number) {
      alert(number + " " + "Is the correct number!");
      output = "";
      pickInteger();
    }

    if (guess < number) {
      console.log("The number I am thinking of is higher than " + guess);
      consolecounter++;
    } else if (guess > number) {
      console.log("The number I am thinking of is lower than " + guess);
      consolecounter++;
    }
    clearConsole(consolecounter);
  })
})



function clearConsole(consolecounter) {
  (consolecounter == 3) && (setTimeout(function() {
    console.clear();
    consolecounter = 0;
  }, 2000));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="utf-8">
  <title>Guess the Number</title>

</head>

<body>
  <div>
    <h2><strong>Guess the Number</strong></h2>
  </div>
  <br/>
  <div id="formDiv">
    <form name="AForm" method="get">
      <p>The computer has picked a number between 1 - 99, you must choose the correct number to win the game. When you guess the right number the game will restart.<br/>
      </p>
      <div id="bodyDiv">
        <p> Your guess is:
          <input id="guess" type="text" size="1" name="theData" value="" autofocus/>
          <input type="submit" name="mybutton" value=" Guess ">
        </p>
        <p id="output">
        </p>
      </div>
    </form>
  </div>
</body>

</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.