Help with Loops for Number Guessing Game assignment

Help with Loops for Number Guessing Game assignment
0

#1

Hi all,
I am new to JavaScript. I am in a course for this but it is only a 4 day course. Our first assignment is to build a number guessing game. Seems to be a common first assignment lol.Anyway, I am stuck with how to do one of the final steps, which is to run a loop with “You Win!” 10 times after the player guesses the correct answer. Any chance someone can guide me through how to so this?

Below is my code

HTML:

<h1>Welcome to my number guessing game!</h1>
<p>We have chosen a number between 1 and 20. Please see if you can guess it.<br> We will give hints while guessing.</p>
<p>Let's Start!</p>
<p>What is your name?</p><input type="text" placeholder="Name" name="name" required class="field" id="name">&nbsp;&nbsp;<button onclick="startGame()">
Begin
</button>

<div id="guess" style="visibility: hidden;">
<div id="welcome">

</div>

<p>Enter your guess: </p>
<input type="text" placeholder="Your Guess" name="userNumber" required class="field" id="userNumber" min="1" max="20">
&nbsp;&nbsp;
<button id="submit" value="clear" onclick="enterGuess(); return false; ">Submit Your Guess</button>
<br>
<br>
<div id="result"></div>
<br>
<button id="playAgain" style="visibility: hidden" onClick="window.location.reload()">Play Again</button>

JS:

function startGame() {
	
	//get the name of the player
  let playerName = document.getElementById('name').value;
  if (playerName == '') {
  	alert('Please enter your name');
  } 
  else {
  	//make the guess div visible
  	var guessDiv = document.getElementById('guess');
  	guessDiv.style.visibility = 'visible';
  
  	var welcomeDiv = document.getElementById('welcome');
  	welcomeDiv.innerHTML = '<h1>Welcome ' + playerName + '</h1>';
  }
  
  
}

var randomNumber = Math.floor(Math.random() * 20) +1;
var numberGuessed = document.getElementById("userNumber").value;

function enterGuess() {

	//Get Users Guess
  let userGuess = document.getElementById("userNumber").value;
  if(userGuess > randomNumber) {
  	result.innerHTML ='Your guess is too high, Please try again';
    document.getElementById("submit").clear();
  }
  else if(userGuess < randomNumber) {
  	result.innerHTML ='Your guess is too low, Please try again';
    document.getElementById("submit").clear();
  }
  else if(userGuess == randomNumber) {
  	result.innerHTML ='Woohoo You Got It Right!!';
    document.getElementById("playAgain").style.visibility = "visible";
  }

}

Thanks in advance!
Johnny


#3

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#4

oops…thank you. I am brand new to the site so did not know this! Thanks again!


#5

Can you be a little more specific of how you want the “You Win!” displayed 10 times? For example, does it need to display like:

You Win!
You Win!
You Win!
You Win!
You Win!
You Win!
You Win!
You Win!
You Win!
You Win!

OR

Flash the phrase “You Win!” on and off 10 times?


#6

like the top one where it shows the string 10 times. I would like to have it flash but that’s a little more than i need lol


#7

I assume you already know how to write a for loop which would loop 10 times?

For the basic version as shown with the 10 lines of “You Win!”, you would you would build a string (let’s call it yourCreatedString) with a <br> at the end of each “You Win!” inside the loop and after the for loop, you would use the result.innerHTML = yourCreatedString; You will need to initialize youCreatedString to a blank string before the for loop.


#8

I don’t really know how to write the for loop… Maybe that’s what is baffling me. I wasn’t sure if I put it in the if statement etc…


#9

#10

Oh I will be utilizing this site along with a few others to help gain more knowledge. As I had said this course is only a 4 full day course so rather compressed and rushed.


#11

Hmmm…i am not exactly sure how to add any of this code to my js. :frowning:
Thanks anyway


#12

Here’s what I have that seems to get the result, but I am not exactly sure how I enter it into my js…

HTML

<div id="endResult"></div>

JS

var correct = ["You Win!!", "You Win!!", "You Win!!", "You Win!!", "You Win!!", "You Win!!", "You Win!!", "You Win!!", "You Win!!", "You Win!!",]
var text = "";
var i;
for (i = 0; i < correct.length; i++) {
    text += correct[i] + "<br>";
}
document.getElementById("endResult").innerHTML = text;


#13

wooohooo…I think I figured it out!!

HTML

<div id="endResult"></div>

JS

function startGame() {
	
	//get the name of the player
  let playerName = document.getElementById('name').value;
  if (playerName == '') {
  	alert('Please enter your name');
  } 
  else {
  	//make the guess div visible
  	var guessDiv = document.getElementById('guess');
  	guessDiv.style.visibility = 'visible';
  
  	var welcomeDiv = document.getElementById('welcome');
  	welcomeDiv.innerHTML = '<h1>Welcome ' + playerName + '</h1>';
  }
  
  
}

var randomNumber = Math.floor(Math.random() * 20) +1;
var numberGuessed = document.getElementById("userNumber").value;

function enterGuess() {
	var correct = ["You Win!!", "You Win!!", "You Win!!", "You Win!!", "You 		Win!!", "You Win!!", "You Win!!", "You Win!!", "You Win!!", "You 		Win!!",]
	var text = "";
	var i;
	//Get Users Guess
  let userGuess = document.getElementById("userNumber").value;
  
  if(userGuess > randomNumber) {
  	result.innerHTML ='Your guess is too high, Please try again';
    document.getElementById("submit").clear();
  }
  else if(userGuess < randomNumber) {
  	result.innerHTML ='Your guess is too low, Please try again';
    document.getElementById("submit").clear();
  }
  for (i = 0; i < correct.length; i++) {
    text += correct[i] + "<br>";
    if(userGuess == randomNumber) {
  		document.getElementById("endResult").innerHTML = text;
}
      
   	  document.getElementById("playAgain").style.visibility = "visible";
  }
}

Anyone able to help point me in the right direction of how to clear the guess field after each guess as well as remove the “high or low guess” text once the answer is guessed?


#14

I simplified your enterGuess function. I also made it so the guess is cleared out after each wrong answer, but leaves the number in the text box when the user wins. Also, you will see upon the user winning, the previous messages relating to high and low guesses is gone.

function enterGuess() {
	//Get Users Guess
  let userGuess = document.getElementById("userNumber").value;
  
  if(userGuess == randomNumber) {
    result.innerHTML = ""; // clears out previous guess messages
    for (var counter = 0; counter < 10; counter++) {
      result.innerHTML += "You Win!!<br>";
    }
    document.getElementById("playAgain").style.visibility = "visible";
  }
  else {
    document.getElementById("userNumber").value = ""; // clear text box after each wrong guess
    let lowHigh = userGuess > randomNumber ? "high" : "low";
  	result.innerHTML ='Your guess is too ' + lowHigh + ', Please try again';
  }
}

#15

Ahhhh…thank you very much Randell! I will take that code and play around with it so I can see how it works. I won’t use it in my assignment as I would like to get the instructors feedback as to how I figured it out.

Thanks again for all the help. Your earlier comment got me thinking and playing around with creating a string that it helped me figure it out.