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"> <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">
<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";
}
}
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.
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.