Highlighted

While loop issue

Community Beginner ,
May 26, 2018

Copy link to clipboard

Copied

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?

<script> var secretnumber = 4;

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

   

    <script> while(Number(guess)!==="4") {

     prompt("incorrect try again");

    } </script>

   

    <script> if(Number(guess)==="4") {alert("you are correct")}

    </script>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

354

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

While loop issue

Community Beginner ,
May 26, 2018

Copy link to clipboard

Copied

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?

<script> var secretnumber = 4;

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

   

    <script> while(Number(guess)!==="4") {

     prompt("incorrect try again");

    } </script>

   

    <script> if(Number(guess)==="4") {alert("you are correct")}

    </script>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

355

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 26, 2018 0
Adobe Community Professional ,
May 26, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 26, 2018 2
Community Beginner ,
May 28, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2018 0
LEGEND ,
May 27, 2018

Copy link to clipboard

Copied

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:

<script>

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2018 2
Community Beginner ,
May 28, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2018 0
osgood_ LATEST
LEGEND ,
May 28, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2018 1