Help with Loops for Number Guessing Game assignment

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

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

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

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…

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.

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

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;

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?

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.