Number guessing game

im just trying to figure out how change the innerHTML of a div when turns is 0 and the full do…while loop is run (10 times.

do {
...
....

} while (turns > 0) 

how do I know I reached the end of the loop then?

the statement after the end of the loop will run.

To test for turns equal to zero use (turns === 0)

1 Like

it works, heres the script

<script>
var turns = 10;
var hint = "Guess a whole number between 1 and 999";
var button = document.getElementById("guessNumber");

button.onclick = checkInput;

function checkInput() {	

var input = document.getElementById('myNumber').value;

input = parseInt(input);

if((input <  1) || (input > 999) || (isNaN(input))) { 
 alert('Enter a whole number between 1 & 999');
} else {
  guessNumber();
}
}
function guessNumber() {

var input = document.getElementById('myNumber').value;

    document.getElementById("Introduction").style.display = "none";
    document.getElementById('intro').style.display = "block";

	document.getElementById('output').innerHTML = "<ol id='guesses'>";

		do {
		//prompt the other user for a guess
		var guess = prompt(hint +' You have ' + turns + ' guesses left.');
		//ensure they entered something
		if (!guess)
		break;
		//convert it to a number
		//guess = parseInt(guess);
		guess = Number(guess);
		
		  if (guess == input) {
			document.getElementById('guesses').innerHTML = '<p><img src="images/winner.png"></p>';
			turns = 0;
		  } else {
			hint = 'Nope.';
			if (guess < input) 
				document.getElementById('guesses').innerHTML += '<li>Your Number: <b>'+guess+'</b> is too small!</li>';
			if (guess > input) 
				document.getElementById('guesses').innerHTML += "<li>Your Number: <b>"+guess+"</b> is too big!</li>";
			turns--;
		  }
		} while (turns > 0) 
	output.innerHTML += "</ol>";
	if (turns ==  0) document.getElementById('guesses').innerHTML = '<p><img src="images/loser.png"><h2>The number was <span>'+input+'</span></h2>';
}
</script>

But I have a few questions though, why why do I need the same variable (input) in both functions? and is that ok how I use the turns variable?

1 Like

Can I see the HTML/CSS you are using?

sure, heres the whole thing…

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Assignment #5: Number Guessing Game</title>
</head>
<body>
<div id="Introduction">
    <input type="text" id="myNumber" placeholder="Please Enter a Whole Number (1-999)">
    <a href="#" id="guessNumber">Start guessing!</a>
</div>
<h1 id="intro" style="display:none">Lets Play A Number Guessing Game!!!</h1>
<div id="output">
</div>
<script>

var turns = 10;
var hint = "Guess a whole number between 1 and 999";
var button = document.getElementById("guessNumber");

button.onclick = checkInput;

function checkInput() {	

var input = document.getElementById('myNumber').value;

input = parseInt(input);

if((input <  1) || (input > 999) || (isNaN(input))) { 
 alert('Enter a whole number between 1 & 999');
} else {
  guessNumber();
}
}
function guessNumber() {

var input = document.getElementById('myNumber').value;

    document.getElementById("Introduction").style.display = "none";
    document.getElementById('intro').style.display = "block";

	document.getElementById('output').innerHTML = "<ol id='guesses'>";

		do {
		//prompt the other user for a guess
		var guess = prompt(hint +' You have ' + turns + ' guesses left.');
		//ensure they entered something
		if (!guess)
		break;
		//convert it to a number
		//guess = parseInt(guess);
		guess = Number(guess);
		
		  if (guess == input) {
			document.getElementById('guesses').innerHTML = '<p><img src="images/winner.png"></p>';
			turns = 0;
		  } else {
			hint = 'Nope.';
			if (guess < input) 
				document.getElementById('guesses').innerHTML += '<li>Your Number: <b>'+guess+'</b> is too small!</li>';
			if (guess > input) 
				document.getElementById('guesses').innerHTML += "<li>Your Number: <b>"+guess+"</b> is too big!</li>";
			turns--;
		  }
		} while (turns > 0) 
	output.innerHTML += "</ol>";
	if (turns ==  0) document.getElementById('guesses').innerHTML = '<p><img src="images/loser.png"><h2>The number was <span>'+input+'</span></h2>';
}
</script>
</body>
</html>

but now the while loop seems messed, the same result seems to happen when I choose the number, and when I use all my turns

			do {
		...
		...       
		  if (guess == input) {
			document.getElementById('guesses').innerHTML = '<p><img src="images/winner.png"></p><h2 id="winner">You Won!!!</h2>';
turns = 0;
			...}
		} while (turns > 0) 
	if (turns ==  0) document.getElementById('guesses').innerHTML = '<p><img src="images/loser.png"></p><h2 id="loser">The number was <span>'+input+'</span></h2>';

I thought turns = 0 and turns == 0 were two separate things though

I can’t see where your code has gone wrong - its about a decade since I looked at such old ways of doing things and my browser has the old debugging dialogs turned off as I no longer use alert confirm and prompt for debugging so I can’t even try testing your code.

This particular task shouldn’t need any loops. You would just count the turns when the event to process a guess is triggered.

This sounds like a good opportunity to refactor the code, as a demonstration of how this makes the code easier to understand.

Alrighty then. Good work Luke. I bet you’ve learned a lot from writing this game so far. I consolidated and styled some of your code to come up with the following. It’s probably not where you want it to be but may be a step closer.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>Assignment #5: Number Guessing Game</title>
  <style>
    #messageBox {
      text-align: center;
      background-color: yellow;
      min-height: 4em;
      border: 1px black solid;
      padding: 1%;
      width: 50%;
      margin: auto;
    }
    
    #myNumber {
      font-size: 150%;
      width: 4em;
      margin: 25px auto;
    }
    
    #output {
      min-height: 1em;
      /*border:1px solid black;*/
      width: 50%;
      margin: 25px auto;
      font-size: 150%;
      padding: 2%;
    }
    
    #inputDiv {
      width: 50%;
      margin: 1em auto;
      border: 1px solid black;
      text-align: center;
      font-size: 250%;
      padding: 1%;
      background-color: orangered;
    }
  </style>
</head>

<body>
  <div id="messageBox"></div>
  <div id="inputDiv">
    <label for="myNumber">Please Enter a Whole Number (1-999) </label>
    <input type="text" id="myNumber" min="1" max="999" autofocus onKeyUp="if(this.value>999){this.value='999';}else if(this.value<0){this.value='1';}">
  </div>
  <div id="output"></div>

  <script>
    var turns = 10;
    var answer = Math.floor(Math.random() * 999) + 1;
    var messageBox = document.getElementById("messageBox");
    var inputBox = document.getElementById('myNumber');

    messageBox.innerHTML = "<h1>Guess My Number</h1>Guess a whole number between 1 and 999.<br>You have " + turns + " tries.<br>Good Luck!";

    myNumber.addEventListener("change", function(e) {
      guessNumber(inputBox.value);
      inputBox.value = '';
    });

    function guessNumber(val) {
      var guess = val;
      if (--turns === 0) loser();
      messageBox.innerHTML = answer + '<br>You guessed: ' + guess + '<br>You have ' + turns + ' guesses left.';
      checkNum(answer, guess);

      function checkNum(answer, guess) {
        var result = "";
        if (guess == answer) result = "<h1>YOU WIN!</h1>";
        else result = 'Your Number: <b>' + guess + '</b> is too ' + (guess < answer ? "small" : "big") + "<br>";

        output.innerHTML += result;
      }

      function winner() {
        output.innerHTML += "YOU WIN!";
      }

      function loser() {
        //messageBox.innerHTML = '<p><img src="images/loser.png"><h2>The number was <span>' + input + '</span></h2>';
        output.innerHTML += "YOU LOST";
      }

    }
  </script>
</body>

</html>
1 Like

That solution is working,but the assignment asks me to use a loop to control the guesses.
I must’ve screwed up something.as I tried to make it better
I made it a form, so onnce its submitted, the checkInput function is run
heres everything, everything seems to work but I think I screwed up my while loop.
After I make 10 (wrong) guesses, im trying to get the error to display,

document.getElementById('output').innerHTML = '<p><img src="images/loser.png"></p><h2 id="loser">The number was <span>'+input+'</span></h2>';

but wasn’t sure how to test if turns = 0 so I tried to check it by =, ==, === with the same result
If One of my guesses is right, the form shows up instead of my (winner) message
And after 10 guesses, the form shows up instead of my (loser) message
when I check the console to see if I have any errors, I only get

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Assignment #5: Number Guessing Game</title>
</head>
<body>
<h1>Lets Play A Number Guessing Game!!!</h1>
<form id="Numbers">
    <input type="text" id="myNumber" placeholder="Please Enter a Whole Number (1-999)">
    <input type="submit" value="Start Guessing!">
</form>
<div id="output">
</div>
<script>

var turns = 10;
var hint = "Guess a whole number between 1 and 999";
var button = document.getElementById("guessNumber");

Numbers.onsubmit = checkInput;

function checkInput() {	

var input = document.getElementById('myNumber').value;

input = parseInt(input);

 if((input <  1) || (input > 999) || (isNaN(input))) { 
 alert('Enter a whole number between 1 & 999');
 } else {
  guessNumber();
}
}
function guessNumber() {

var input = document.getElementById('myNumber').value;

    document.getElementById("Numbers").style.display = "none";

	document.getElementById('output').innerHTML = "<ol id='guesses'>";

		do {
		//prompt the other user for a guess
		var guess = prompt(hint +' You have ' + turns + ' guesses left.');
		//ensure they entered something
		if (!guess)
		break;
		//convert it to a number
		//guess = parseInt(guess);
		guess = Number(guess);
		
		  if (guess == input) {
			document.getElementById('output').innerHTML = '<p><img src="images/winner.png"></p><h2 id="winner">You Won!!!</h2>';
			turns = 0;
		  } else {
			hint = 'Nope.';
			if (guess < input) 
				document.getElementById('guesses').innerHTML += '<li>Your Number: <b>'+guess+'</b> is too small!</li>';
			if (guess > input) 
				document.getElementById('guesses').innerHTML += "<li>Your Number: <b>"+guess+"</b> is too big!</li>";
			turns--;
		  }
		} while (turns > 0) 
	output.innerHTML += "</ol>";
	if (turns =  0) document.getElementById('output').innerHTML = '<p><img src="images/loser.png"></p><h2 id="loser">The number was <span>'+input+'</span></h2>';
}
</script>
</body>
</html>

its at
http://fixmysite.us/Web_Programming_With_Javascriipt/Assignment5

So the problem is that the loser image is not appearing?

If that’s the problem then check your line 67:

> if (turns = 0) document.getElementById('output').innerHTML = '<p><img src="images/loser.png"></p><h2 id="loser">The number was <span>'+input+'</span></h2>';

if (turns = 0) should be: if (turns == 0)
Also, check that there is an images subfolder and that it has a loser.png in it.

The loser image is showing, but it resets back to the actual HTML so quickly that you don’t see the image.

1 Like

why does it reset back? Is there a way to make it not reset so I can make sure it works?
would the preventDefault() work

How do I use it if I add the event like

Numbers.onsubmit = checkInput

With that old way of attaching the event you need to return false.

For preventDefault to work you need to attach the event properly using an event listener.

ok made this change

Numbers.onsubmit = checkInput;

to

document.getElementById("Numbers").addEventListener("onsubmit", function(event){
event.preventDefault();
checkInput();
});

but now nothing happens if I press the submit button after entering a # in, how do I get the checkInput function to run then?

The event is called “submit” - none of the event names have “on” on the front - that is just how they were referenced with the old event handlers.

ok, made the edits

<form id="Numbers" onSubmit="checkInput()">
    <input type="text" id="myNumber" placeholder="Please Enter a Whole Number (1-999)">
    <input type="submit" value="Start Guessing!">
</form>

Which seems to work, but had to add the event listener to the script

document.getElementById("Numbers").addEventListener("submit", function(event){
event.preventDefault();
});

which seems to prevent the page from refreshing,
http://fixmysite.us/Web_Programming_With_Javascriipt/Assignment5/
but my logic is screwed up, it always says I lost when I should win though
Its like this doesn’t work

if (guess == input) {
document.getElementById('output').innerHTML = '<p><img src="images/winner.png"></p><h2 id="winner">You Won!!!</h2>';
turns = 0;

but then why does this seem to work

if (guess < input)

if I try to see both variables…

console.log(input);
consoee.log(guess);

and heres the result


The only thing I can think of is i make turns = 0 when both values are equall, is it conflicting with

if (turns == 0)

//the loser message

that was the issue, it seemed to resolve itself if I replaced turns = 0 to a break to get out of the loop

I found a strange bug, I enter 8 as the number, then I make random guesses…this happens


some of my guesses were bigger than 8, yet it said the guess was too small
Just to make sure I wrote out both variables to the console

do {
//prompt the other user for a guess
var guess = prompt(hint +' You have ' + turns + ' guesses left.');
//ensure they entered something
console.log(guess);
console.log(input);
  if (!guess)
  break;
  if (guess == input) {
  document.getElementById('result').innerHTML = '<p><img src="images/winner.png"></p><h2 id="winner">You Won!!!</h2>';
  break;
 } else {
hint = 'Nope.';
if (guess < input) 
document.getElementById('guesses').innerHTML += '<li>Your Number: <b>'+guess+'</b> is too small!</li>';
if (guess > input) 
document.getElementById('guesses').innerHTML += "<li>Your Number: <b>"+guess+"</b> is too big!</li>";
turns--;
 } 
} while (turns > 0) 

Do you see what the problem is?

it look like the problem was fixed when I converted both variables to a number type like

input = Number(input);

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.