JavaScript 猜词游戏问题：按下字母键后不会多次填充同一个字母答案

【问题标题】：JavaScript word guessing game issue: the same letter won't populate multiple times once the letter key is pressedJavaScript 猜词游戏问题：按下字母键后不会多次填充同一个字母
【发布时间】：2019-10-03 11:51:19
【问题描述】：

我有我的猜词游戏设置，当用户按下正确的字母时，相应的下划线被替换为字母。但是，我似乎无法多次填充同一个字母。示例：单词“Pennywise”有两个字母“n”，但是当按下该字母时，无论我按多少次，都会填充一个“n”。

// 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(" ");

【问题讨论】：

.indexOf() 返回搜索模式的第一次出现，而不是所有索引。您应该继续查找索引（在字符串的其余部分），直到找不到其他索引。

标签： javascript dom-events event-listener dom-manipulation

【解决方案1】：

问题是您不会继续使用randWord.indexOf(keyWord)，因为每次它获取您要查找的字母的第一次出现时，您可以在每次触发keydown 事件时维护一个计数器和匹配字母，如果匹配，则增加它以继续：

// 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>

【讨论】：