CODEWITHSUNDEEP
javascriptdom-eventsevent-listenerdom-manipulation
Michael Roberts
Michael Roberts

Reputation: 1

JavaScript word guessing game issue: the same letter won't populate multiple times once the letter key is pressed

I have my word guessing game setup so that when the user presses the correct letter, the corresponding underscore is replaced with the letter. However, I can't seem to get the same letter to populate multiple times. Example: the word "Pennywise" has two of the letter 'n', but when the letter is pressed only one 'n' will populate no matter how many times I press the letter.

// Global Variables
// ================================================================================================================================================
// Create an array of words
var word = [
"michael myers", 
"freddy krueger", 
"jason voorhees", 
"xenomorph", 
"pinhead", 
"ghostface", 
"hannibal lector", 
"pennywise", 
"leatherface", 
"chucky", 
"jack torrance"
]

var rightLetter = [];
var wrongLetter = [];
var underScore = [];

// Choose word randomly
    var randNum = Math.floor(Math.random() * word.length);
    var randWord = word[randNum];
    console.log(randWord);

// DOM manipulation
var docUnderScore = document.getElementsByClassName("underscore");
var docRightGuess = document.getElementsByClassName("rightGuess");
var docWrongGuess = document.getElementsByClassName("wrongGuess");


// ================================================================================================================================================
// Main
// ================================================================================================================================================
// Create underscore based on length of word
    var generateUnderscore = () => {
        for ( var i = 0; i < randWord.length; i++) {
            underScore.push("_");
        }
        return underScore;
    }

// Get user guess
    document.addEventListener("keypress", (event) => {
        var keyWord = String.fromCharCode(event.keyCode);
        // if user's guess is correct    
        if (randWord.indexOf(keyWord) === -1) {
        // replace underscore with correct letter
            underScore[randWord.indexOf(keyWord)] = keyWord;
            docUnderScore[0].innerHTML = underScore.join(" ");

        // check to see if user word matches guess
            if (underScore.join("") === randWord) {
                alert("You Survived!");
            }
        }
        // if user's guess is incorrect     
        else {
            wrongLetter.push(keyWord);
            docWrongGuess[0].innerHTML = wrongLetter;
        }

    });

    docUnderScore[0].innerHTML = generateUnderscore().join(" ");

Upvotes: 0

Views: 378

Answers (1)

shrys
shrys

Reputation: 5940

The issue is that you won't proceed further using randWord.indexOf(keyWord) as each time it fetches the first occurence of the letter you want to find, instead you could maintain a counter and match letter each time keydown event is fired, if it doe match then increment it to proceed:

// Create an array of words
var word = [
  "michael myers",
  "freddy krueger",
  "jason voorhees",
  "xenomorph",
  "pinhead",
  "ghostface",
  "hannibal lector",
  "pennywise",
  "leatherface",
  "chucky",
  "jack torrance"
];

var rightLetter = [];
var wrongLetter = [];
var underScore = [];
var counter = 0;

// Choose word randomly
var randNum = Math.floor(Math.random() * word.length);
var randWord = word[7];
console.log(randWord);

// DOM manipulation
var docUnderScore = document.getElementsByClassName("underscore");
var docRightGuess = document.getElementsByClassName("rightGuess");
var docWrongGuess = document.getElementsByClassName("wrongGuess");

// Create underscore based on length of word
var generateUnderscore = () => {
  for (var i = 0; i < randWord.length; i++) {
    underScore.push("_");
  }
  return underScore;
}

// Get user guess
document.addEventListener("keypress", (event) => {
  var keyWord = String.fromCharCode(event.keyCode);
  // if user's guess is correct    
  if (randWord[counter] == keyWord) {
    // replace underscore with correct letter
    underScore[counter] = keyWord;
    docUnderScore[0].innerHTML = underScore.join(" ");

    // check to see if user word matches guess
    if (underScore.join("") === randWord) {
      console.log("You Survived!");
    }
    counter++;
  }
  // if user's guess is incorrect     
  else {
    wrongLetter.push(keyWord);
    docWrongGuess[0].innerHTML = wrongLetter;
  }
});

docUnderScore[0].innerHTML = generateUnderscore().join(" ");
<div class="underscore"></div>
<div class="rightGuess"></div>
<div class="wrongGuess"></div>

Upvotes: 1

Related Questions