Javascript 在div中的特定点追加字符串

我正在用HTML制作一个小的hang-man游戏，我正在尝试将用户正确猜测的字母推送到

div

中需要的位置。以下是我到目前为止的情况：

var words = ['dog', 'mouse', 'horse', 'fossil', 'christmas', 'mountain', 'javascript', 'glitter', 'pringles', 'connect'];
var output = "";
var gRand = "";
var gWordAry = "";
function startGame() {
    var rand = words[Math.floor(Math.random() * words.length)]; //gets a random word from the array, stores as rand
    var wordAry = rand.split(''); //splits random word into its own array and each letter is in the array
    gRand = rand; //stores random word as global var
    gWordAry = wordAry;
    alert(wordAry);
    $('#hangmanGame').show();
    $('#startBtn').hide();
    //alert(rand);
    for (i = 0; i < wordAry.length; i++) { //draws a dash for every letter in the random word array after split
        //draw canvas dash
        output += ' _ ';
        $('#wordGuess').html(output);
    }


    //alert(output);


}

function guess(letter) {
    var letterID = letter.toLowerCase(); //converts letter to lowercase from html
    //alert(letterID);
    var foundLetter = 0;
    for (i=0;i<gWordAry.length; i++){
        if (gWordAry[i] == letterID){ //if a letter in the word array = the letter clicked this will run
            //alert('correct');
            foundLetter++;
            displayLetter(letterID);
        }
    }
    if (foundLetter == 0){ //if no letters in the array are found this will run
        alert('Try Again');
    }

}

function displayLetter(letterID){
    //displays all letters in the word
    $('#wordGuess').append(letterID)
}

var words=['dog'，'mouse'，'horse'，'fossil'，'christmas'，'mountain'，'javascript'，'glitter'，'pringles'，'connect']；
var输出=”；
var gRand=“”；
var gWordAry=“”；
函数startName（）{
var rand=words[Math.floor（Math.random（）*words.length）]；//从数组中获取一个随机字，存储为rand
var wordAry=rand.split（“”）；//将随机字拆分为自己的数组，每个字母都在数组中
gRand=rand；//将随机字存储为全局变量
gWordAry=单词；
警觉（文字）；
$（'#hangmanGame'）.show（）；
$（'#startBtn'）.hide（）；
//警报（兰德）；
对于（i=0；i对于（i=0；i如果您希望猜测到的所有字母都显示在您的div中，那么您可以修改
displayLetter
，首先读取
#wordGuess
中的内容，并将刚刚猜测到的字母附加到该列表中，然后将该信息写入
#wordGuess
这是游戏的工作版本：）

replaceAt函数取自


var words=['dog']；
var输出=”；
var gRand=“”；
var gWordAry=“”；
函数startName（）{
var rand=words[Math.floor（Math.random（）*words.length）]；//从数组中获取一个随机字，存储为rand
var wordAry=rand.split（“”）；//将随机字拆分为自己的数组，每个字母都在数组中
gRand=rand；//将随机字存储为全局变量
gWordAry=单词；
警觉（文字）；
$（'#hangmanGame'）.show（）；
$（'#startBtn'）.hide（）；
//警报（兰德）；
对于（i=0；i


A.
B
C
D
E
F
G
H
我
J
K
L
M
N
O
P
Q
R
s
T
U
v
W
X
Y
Z
将构建空格的循环更改为用特定于该索引的id将每个下划线括起来，以便以后可以将其作为目标：

for (i = 0; i < wordAry.length; i++) { //draws a dash for every letter in the random word array after split
    //draw canvas dash
    output += "<span id='letter" + i + "'>_</span>";
}
$('#wordGuess').html(output);

也许在这一点上答案太多了，但我会这样做

var answer = 'banana';
var state = '______';

function showLetter(letter, answer, state) {
  var lastPos = -1;

  while (answer.indexOf(letter, lastPos + 1) !== -1) {
    var position = answer.indexOf(letter, lastPos + 1);
    lastPos = position;
    state[position] = 'letter';
    state = state.substr(0, position)
      + letter
      + state.substr(position + 1);
  }

  return state;
}

通过这种方式，您可以将您的
字母
、
答案
、和
状态
（状态是猜测单词的当前状态）传递给此函数，并将结果传递给将在DOM中显示它的内容。这可以非常简单：
document.getElementById（'wordGuess'）。innerHTM

我根据@c-smith的方法制作了一个演示基本思想的演示文稿。
，但略为稳健

可以看到工作示例

首先将初始化循环更改为

for (i = 0; i < wordAry.length; i++) { //draws a dash for every letter in the random word array after split
                //draw canvas dash
                output += "<span class='letter" + wordAry[i] + "'> _ </span>";
                $('#wordGuess').html(output);
            }

您的
guess
函数将更改为此

function guess(letter) {
            var letterID = letter.toLowerCase(); //converts letter to lowercase from html
            //alert(letterID);
            var foundLetter = displayLetter(letterID);
            if (foundLetter == 0){ //if no letters in the array are found this will run
                alert('Try Again');
            }

        }

我试着把它减到最低限度，但它可以改进得更多。我希望这对你有用


var words=['dog'，'mouse'，'horse'，'fossil'，'christmas'，'mountain'，'javascript'，'glitter'，'pringles'，'connect']；
var输出=”；
var gRand=“”；
var gWordAry=“”；
函数startName（）{
var rand=words[Math.floor（Math.random（）*words.length）]；//从数组中获取一个随机字，存储为rand
var wordAry=rand.split（“”）；//将随机字拆分为自己的数组，每个字母都在数组中
gRand=rand；//将随机字存储为全局变量
gWordAry=单词；
警觉（文字）；
$（'#hangmanGame'）.show（）；
$（'#startBtn'）.hide（）；
//警报（兰德）；
对于（i=0；ivar answer = 'banana';
var state = '______';

function showLetter(letter, answer, state) {
  var lastPos = -1;

  while (answer.indexOf(letter, lastPos + 1) !== -1) {
    var position = answer.indexOf(letter, lastPos + 1);
    lastPos = position;
    state[position] = 'letter';
    state = state.substr(0, position)
      + letter
      + state.substr(position + 1);
  }

  return state;
}

for (i = 0; i < wordAry.length; i++) { //draws a dash for every letter in the random word array after split
                //draw canvas dash
                output += "<span class='letter" + wordAry[i] + "'> _ </span>";
                $('#wordGuess').html(output);
            }

function displayLetter(letterID){
            //displays all letters in the word
            $(".letter"+letterID).html(letterID);
            // return the number of letters found.
            return $(".letter"+letterID).length;
        }

function guess(letter) {
            var letterID = letter.toLowerCase(); //converts letter to lowercase from html
            //alert(letterID);
            var foundLetter = displayLetter(letterID);
            if (foundLetter == 0){ //if no letters in the array are found this will run
                alert('Try Again');
            }

        }