javascript - 字符串的有序更改(javascript)

Question

我正在尝试创建某种游戏，用户必须猜测一个单词，点击字母表上的正确符号。当用户的猜测正确时，代码必须将所有“_”替换为正确的字符。我的代码用正确的字符替换了一行“_”，但顺序错误。

var secretW = document.getElementById('secretWord'); //id of div elem
var guessWord = "someword"; // the word to guess
for (var x = 0; x < guessWord.length; x++) {
    secretW.innerHTML += '<span class="lineStyle">_ </span>';
} // creates a pattern, so user knows how many symbols to guess

此代码检查其匹配的点击字符:

for (var i = 0; i < on.length; i++){
    on[i].addEventListener('click', function(){
        var whatLetter = this.innerHTML;
        var num = 0;
        var trueCount = 0;
        for (num = 0; num < guessWord.length; num++) {
            if (whatLetter == guessWord.charAt(num)) {
                secretW.innerHTML = secretW.innerHTML.replace('_ ', whatLetter);
                trueCount++;
            } else if (whatLetter != guessWord.charAt(num)) {
                secretW.innerHTML = secretW.innerHTML.replace('_ ', '_ ');
            } 
        }
        if (trueCount == 0) {
            mistake();
        }
    });
}

其目的是，如果用户单击“s”，则按正确的顺序显示单词的每个“s” 例如: 1)单词是“某个单词” 2)div显示:_ _ _ _ _ _ _ _ 3)用户点击“o”按钮 4) div 显示:“_ o _ _ _ o _ _” 在我的代码中它是: “o o _ _ _ _ _ _”

Answer 1

问题是，使用innerHTML.replace，您无法选择要替换的_ 的特定出现位置(它将替换它找到的第一个)。

相反，您可以选择 #secretWord 内的第 n 个 .lineStyle 元素并更改其内容。

if (whatLetter == guessWord.charAt(num)) {
  secretW.getElementsByClassName("lineStyle")[num].innerHTML=whatLetter;
  trueCount++;
}

检查这个jsfiddle进行演示(尝试单击o)