How to reset variables to original, vanilla Javascript?

I'm making a simple hangman game in vanilla javascript and would like the game to reset after a player losses. Specifically, I'd like to: 1. reset the "guessRemain" variable 2. clear out the "guess" id, so none of the guessed letters are shown 3. choose another random word from the array.

Thanks in advance for your help!

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Hangman Game</title>

  <link rel="stylesheet" type="text/css" href="assets\css\reset.css"/>
  <link rel="stylesheet" type="text/css" href="assets\css\style.css">
  <link href="" rel="stylesheet">

  <script src=".js"></script>

</head>
<body>
    <div id="white">
        <img src="assets\images\turkey.png" alt="turkey" class="turkeyImage">
    </div>
    <div id="orangebox">
        <h4>thanksgiving</h4>
        <h4 class="hangman">hangman</h4>
    </div>
    <div class="instructions">
        <h1>Instructions:</h1>
        <br/>
        <h2>1. Guess a Thanksgiving dish!</h2>
        <br/>
        <h3>2. Press any key to begin.</h3>
    </div>
    <div class="display">
        <p class="greywords">Current Word:</p>
        <br/>
        <p id="current"></p>
        <br/>
        <br/>
         <p class ="greywords">Number of Guesses Remaining:</p>
         <br/>
         <p id="remain"></p>
         <br>
         <br/>
         <p class="greywords">Letters Already Guessed:</p>
         <p id="guess"></p>
         <br>
         <br/>
         <p class="greywords">Wins:</p>
         <p id="win"></p>
         <br>
         <br/>
         <p class="greywords">Losses:</p>
         <p id="loss"></p>
     </div>

<!-- End of HTML -->

<script type="text/javascript">

// Step 2: create variable of the food words
var wins = 1;
var losses = 1;
var guessRemain = 10;
var foodWords = [
 "pie",
 "turkey",
 "bacon",
 "bread"
 ];


// Step 1: display remaining gueses
document.getElementById("remain").innerHTML = guessRemain;
// Step 3: create a variable to pick a random word from that array
var randomWord = foodWords[Math.floor(Math.random() * foodWords.length)];
console.log(randomWord);
//Step 4: make it count the number of letters in that word that you just picked
var count = [];
 for (var i = 0; i < randomWord.length; i++) {
 count[i] = "_ ";
 }
//Step 5: write the var on the screen
document.getElementById("current").innerHTML = count;

//Step 6: have it recognize that there are remaining letters
var remainingLetters = randomWord.length;
    console.log("I HAVE " + remainingLetters + " left");

//Step 7: function for when they click a key
document.onkeyup=function(event) {
    var userGuess = event.key;
    document.getElementById("guess").innerHTML += userGuess + " ";
    // console.log(randomWord.length);
    if (randomWord.includes(userGuess)) {
        // console.log("test");
// Step 7: if this statment is true, then modify the count variable, replace the dash in count with letter, and it has the correct position, and display the letter
    var guessIndex = randomWord.indexOf(userGuess);
    //console.log(randomWord.indexOf(userGuess));
    count[guessIndex] = userGuess
    //console.log(count);
    document.getElementById("current").innerHTML = count;
    remainingLetters--;
    console.log("I HAVE " + remainingLetters + " left");
    if (remainingLetters === 0) {
        document.getElementById("win").innerHTML = wins++;
        console.log("I have won");}
}
// Step 8: if not true, then subtract a guess

    else {
       document.getElementById("remain").innerHTML = guessRemain--;
       document.getElementById("remain").innerHTML = guessRemain;
        if (guessRemain === 0) {
        document.getElementById("loss").innerHTML = losses++;
        console.log("I have lost");
    }
            }
}
// Step 10: if there are no letters remaining in count, then add "1" to the win id and reset the page

        // if (remainingLetters === 0) {
        // document.getElementById("#win").innerHTML = winSs++;
        // console.log("I have won");
        //console.log("i win");
        // function reset() {
        // document.getElementById("display").reset();
        // }
// }
// Step 11: if there are no guesses remaining, add a "1" to the loss id and reset the page
        // if (remainingGuess < 0) {
        // document.getElementById("#loss").innerHTML = ++1;
        // function reset() {
        // document.getElementById("display").reset();
        // }
        // }

 </script>
</body>
<div class="footer">
</div>
</html>

Thanks in advance for your help!

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Hangman Game</title>

  <link rel="stylesheet" type="text/css" href="assets\css\reset.css"/>
  <link rel="stylesheet" type="text/css" href="assets\css\style.css">
  <link href="https://fonts.googleapis./css?family=Lato" rel="stylesheet">

  <script src="https://use.fontawesome./ca6de464ee.js"></script>

</head>
<body>
    <div id="white">
        <img src="assets\images\turkey.png" alt="turkey" class="turkeyImage">
    </div>
    <div id="orangebox">
        <h4>thanksgiving</h4>
        <h4 class="hangman">hangman</h4>
    </div>
    <div class="instructions">
        <h1>Instructions:</h1>
        <br/>
        <h2>1. Guess a Thanksgiving dish!</h2>
        <br/>
        <h3>2. Press any key to begin.</h3>
    </div>
    <div class="display">
        <p class="greywords">Current Word:</p>
        <br/>
        <p id="current"></p>
        <br/>
        <br/>
         <p class ="greywords">Number of Guesses Remaining:</p>
         <br/>
         <p id="remain"></p>
         <br>
         <br/>
         <p class="greywords">Letters Already Guessed:</p>
         <p id="guess"></p>
         <br>
         <br/>
         <p class="greywords">Wins:</p>
         <p id="win"></p>
         <br>
         <br/>
         <p class="greywords">Losses:</p>
         <p id="loss"></p>
     </div>

<!-- End of HTML -->

<script type="text/javascript">

// Step 2: create variable of the food words
var wins = 1;
var losses = 1;
var guessRemain = 10;
var foodWords = [
 "pie",
 "turkey",
 "bacon",
 "bread"
 ];


// Step 1: display remaining gueses
document.getElementById("remain").innerHTML = guessRemain;
// Step 3: create a variable to pick a random word from that array
var randomWord = foodWords[Math.floor(Math.random() * foodWords.length)];
console.log(randomWord);
//Step 4: make it count the number of letters in that word that you just picked
var count = [];
 for (var i = 0; i < randomWord.length; i++) {
 count[i] = "_ ";
 }
//Step 5: write the var on the screen
document.getElementById("current").innerHTML = count;

//Step 6: have it recognize that there are remaining letters
var remainingLetters = randomWord.length;
    console.log("I HAVE " + remainingLetters + " left");

//Step 7: function for when they click a key
document.onkeyup=function(event) {
    var userGuess = event.key;
    document.getElementById("guess").innerHTML += userGuess + " ";
    // console.log(randomWord.length);
    if (randomWord.includes(userGuess)) {
        // console.log("test");
// Step 7: if this statment is true, then modify the count variable, replace the dash in count with letter, and it has the correct position, and display the letter
    var guessIndex = randomWord.indexOf(userGuess);
    //console.log(randomWord.indexOf(userGuess));
    count[guessIndex] = userGuess
    //console.log(count);
    document.getElementById("current").innerHTML = count;
    remainingLetters--;
    console.log("I HAVE " + remainingLetters + " left");
    if (remainingLetters === 0) {
        document.getElementById("win").innerHTML = wins++;
        console.log("I have won");}
}
// Step 8: if not true, then subtract a guess

    else {
       document.getElementById("remain").innerHTML = guessRemain--;
       document.getElementById("remain").innerHTML = guessRemain;
        if (guessRemain === 0) {
        document.getElementById("loss").innerHTML = losses++;
        console.log("I have lost");
    }
            }
}
// Step 10: if there are no letters remaining in count, then add "1" to the win id and reset the page

        // if (remainingLetters === 0) {
        // document.getElementById("#win").innerHTML = winSs++;
        // console.log("I have won");
        //console.log("i win");
        // function reset() {
        // document.getElementById("display").reset();
        // }
// }
// Step 11: if there are no guesses remaining, add a "1" to the loss id and reset the page
        // if (remainingGuess < 0) {
        // document.getElementById("#loss").innerHTML = ++1;
        // function reset() {
        // document.getElementById("display").reset();
        // }
        // }

 </script>
</body>
<div class="footer">
</div>
</html>

Share Improve this question edited Nov 25, 2017 at 4:27 dsolimano 9,0163 gold badges51 silver badges65 bronze badges asked Nov 19, 2017 at 3:46 becky armstrong 932 gold badges3 silver badges10 bronze badges

You could either refresh the page or make and call an init() function that sets the initial values of your variables. – Spencer Wieczorek Commented Nov 19, 2017 at 4:01

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

Simply set the variable, so to "reset" guessRemain you'd just type

guessRemain = 10;

inside your reset function, The same would go for any other variables.

As for the Guesses already displayed on the web page, you'd do something similar to this

document.getElementById("guess").innerHTML = "";

Hope that helps :)

First off, clear the guess element somewhere in steps 1-6 by setting its innerHTML to an empty string. Take your steps 1-6 and put them in a function called initialize like so:

Edit: declare your variables wins, losses, guessRemain, foodWords, randomWords, count, remainingLetters outside of the function below so that you'll have access to them in your onkeyup handler

var wins, losses, guessRemain, foodWords, randomWords, count, remainingLetters;

function initialize() {

    // Step 1: create variable of the food words
    wins = 1;
    losses = 1;
    guessRemain = 10;
    foodWords = [
     "pie",
     "turkey",
     "bacon",
     "bread"
     ];

    // Clear the guess
    document.getElementById("guess").innerHTML = "";

    // Step 2: display remaining gueses
    document.getElementById("remain").innerHTML = guessRemain;

    // Step 3: create a variable to pick a random word from that array
    randomWord = foodWords[Math.floor(Math.random() * foodWords.length)];
    console.log(randomWord);

    //Step 4: make it count the number of letters in that word that you just picked
    count = [];

    for (var i = 0; i < randomWord.length; i++) {
        count[i] = "_ ";
    }

    //Step 5: write the var on the screen
    document.getElementById("current").innerHTML = count;

    //Step 6: have it recognize that there are remaining letters
    remainingLetters = randomWord.length;

    console.log("I HAVE " + remainingLetters + " left");

}

Call the function initialize() somewhere in your code (outside of the onkeyup handler) to initialize your game for the first time.

Now, you can reuse the initialize function whenever you want to reset your game. For example, you can do something like this when the game is over (place this code inside your onkeyup handler towards the bottom):

if (remainingLetters === 0 || remainingGuess === 0) {
    inititalize();
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to reset variables to original, vanilla Javascript? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)