While loop issue

Report · May 26, 2018

Hello i am working on playing with some while loops in Dreamweaver. Its a number game where you have to guess the secret number which is 4. If you guess incorrect a prompt should be executed so you can guess again. My problem is the first prompt only executes and regardless of the number inserted nothing happens. I tried putting this code all in one script tag nothing prompts. What am i doing wrong?

var guess = prompt("Guess a number"); </script>

prompt("incorrect try again");

} </script>

</script>

Report · May 26, 2018

I think this will do what you want and more...

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number guessing game</title>
<style>
html { font-family: sans-serif; }
body {
    width: 50%;
    max-width: 800px;
    min-width: 480px;
    margin: 0 auto;
}
.lastResult {
    color: white;
    padding: 3px;
}
</style>
</head>
<body>
<h1>Number guessing game</h1>
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>
<div class="form">
<label for="guessField">Enter a guess: </label>
<input type="text" id="guessField" class="guessField">
<input type="submit" value="Submit guess" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
<script>
// Your JavaScript goes here
var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');
var guessCount = 1;
var resetButton;
guessField.focus();
function checkGuess() {
var userGuess = Number(guessField.value);
if(guessCount === 1) {
guesses.textContent = 'Previous guesses: ';
  }
guesses.textContent += userGuess + ' ';
if(userGuess === randomNumber) {
lastResult.textContent = 'Congratulations! You got it right!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if(guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
lowOrHi.textContent = '';
setGameOver();
} else {
lastResult.textContent = 'Wrong!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent = 'Last guess was too low!';
} else if(userGuess > randomNumber) {
lowOrHi.textContent = 'Last guess was too high!';
  }
}
guessCount++;
guessField.value = '';
guessField.focus();
  }
guessSubmit.addEventListener('click', checkGuess);
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
      }
function resetGame() {
guessCount = 1;
var resetParas = document.querySelectorAll('.resultParas p');
for(var i = 0 ; i < resetParas.length ; i++) {
resetParas.textContent = '';
        }
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
}
</script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 28, 2018

Thank you very much for this, this has helped a great deal to take this further.

Report · May 27, 2018

Nancys solution is a more sophisticated app and you should consider going down that route, I would, however if you want to use the 'prompt' approach as as your post demonstrates, you would approach it like below:

javscript only fires once (and that's where you are going wrong) unless you tell it to do otherwise:

function reCall() {

var guessNumber = prompt("Wrong, have another guess?");

if(guessNumber === "4") {

alert("Correct Number");

}

else {

reCall();

}

var guessNumber = prompt("Please guess the secret number");

if(guessNumber === "4") {

alert("Correct Number");

}

else {

reCall();

}

</script

Report · May 28, 2018

Thank you very much for the feedback this solution has helped. It is working as intended. Is it the reCall behavior that tells JavaScript to fire it twice?

Report · May 28, 2018

Jalucard wrote
Is it the reCall behavior that tells JavaScript to fire it twice?

Yes, that keeps calling the reCall() function until the correct number is provided.

Adobe Community

While loop issue

1 Correct answer