在div中的特定点附加一个字符串

Question

我正在用HTML制作一个小挂牌游戏，我试图将用户已经猜到的一封信推到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)
}

HTML：

<div id="hangmanGame">
    <div id="wordGuess">  </div>  //THIS IS THE DIV WHERE THE LETTERS ARE GOING
    <table style="margin: auto;position: relative;top: 500px;">
        <tr> 
            <td><button class="alphabet" type="button"> </button></td>
            <td> <button type="button" onclick="guess('A')" id="1" class="alphabet">A </button></td> 
            <td> <button type="button" onclick="guess('B')" id="2" class="alphabet">B </button></td>
            <td> <button type="button" onclick="guess('C')" id="3" class="alphabet">C </button></td>
            <td> <button type="button" onclick="guess('D')" id="4" class="alphabet">D </button></td>
            <td> <button type="button" onclick="guess('E')" id="5" class="alphabet">E </button></td>
            <td> <button type="button" onclick="guess('F')" id="6" class="alphabet">F </button></td>
            <td> <button type="button" onclick="guess('G')" id="7" class="alphabet">G </button></td>
            <td> <button type="button" onclick="guess('H')" id="8" class="alphabet">H </button></td>
            <td> <button class="alphabet" type="button"> </button></td></tr>
        <tr> 
            <td> <button class="alphabet" type="button"> </button></td>
            <td> <button type="button" onclick="guess('I')" id="9" class="alphabet">I </button></td>
            <td> <button type="button" onclick="guess('J')" id="10" class="alphabet">J </button></td>
            <td> <button type="button" onclick="guess('K')" id="11" class="alphabet">K </button></td>
            <td> <button type="button" onclick="guess('L')" id="12" class="alphabet">L </button></td>
            <td> <button type="button" onclick="guess('M')" id="13" class="alphabet">M </button></td>
            <td> <button type="button" onclick="guess('N')" id="14" class="alphabet">N </button></td>
            <td> <button type="button" onclick="guess('O')" id="15" class="alphabet">O </button></td>
            <td> <button type="button" onclick="guess('P')" id="16" class="alphabet">P </button></td>
            <td><button class="alphabet" type="button"> </button></td></tr>
        <tr> <td> <button type="button" onclick="guess('Q')" id="17" class="alphabet">Q </button></td>
            <td> <button type="button" onclick="guess('R')" id="18" class="alphabet">R </button></td>
            <td> <button type="button" onclick="guess('S')" id="19" class="alphabet">S </button></td>
            <td> <button type="button" onclick="guess('T')" id="20" class="alphabet">T </button></td>
            <td> <button type="button" onclick="guess('U')" id="21" class="alphabet">U </button></td>
            <td> <button type="button" onclick="guess('V')" id="22" class="alphabet">V </button></td>
            <td> <button type="button" onclick="guess('W')" id="23" class="alphabet">W </button></td>
            <td> <button type="button" onclick="guess('X')" id="24" class="alphabet">X </button></td>
            <td> <button type="button" onclick="guess('Y')" id="25" class="alphabet">Y </button></td>
            <td> <button type="button" onclick="guess('Z')" id="26" class="alphabet">Z </button></td> </tr>
    </table>
</div>

代码可能有点凌乱。我是编码的新手。有人可以帮忙吗？我现在所拥有的内容将该字母添加到_。

的末尾

Answer 1

以下是游戏的工作版本：）

替换来自here

的功能

SELECT `fecha` FROM listado1 WHERE MONTH(`fecha`) = 12 and id_persona=1

SELECT TIMESTAMPDIFF(MONTH, start, end)

Answer 2

如果您希望猜到的所有字母都显示在您的div中，那么您可以修改displayLetter以首先阅读#wordGuess中的内容并附加刚刚猜到的字母该列表，然后将该信息写入#wordGuess。

Answer 3

更改循环，在那里构建空白，用每个下划线包含特定于该索引的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);

当您搜索匹配字母的位置时，将字母和您在字词中找到的位置传递给显示字母功能：

for (i = 0; i < gWordAry.length; i++) {
    if (gWordAry[i] === letterID) { //if a letter in the word array = the letter clicked this will run
        foundLetter++;
        displayLetter(letterID, i);
    }
}

更改displayLetter函数以获取index参数。使用与索引匹配的id定位特定范围，并将其设置为给定的字母：

function displayLetter(letterID, index) {
    //displays all letters in the word
    $('#letter' + index).text(letterID);
}

Answer 4

此时可能是一个答案太多的案例，但这就是我将如何做到这一点。

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;
}

通过这种方式，您可以将letter，answer和state（状态为猜测字的当前状态）传递给此函数，并将结果传递给将它显示在DOM中。这可以很简单：document.getElementById('wordGuess').innerHTM

我做了一个显示基本想法的JSbin。

Answer 5

基于@ c-smith的方法，但略显强大......

可以看到工作示例here

首先将初始化循环更改为。

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);
            }

并且您的displayLetter功能更改为

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

并且您的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');
            }

        }

我试图让它变得最小..但它可以改进很多..

Answer 6

我希望这对你有用

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(i);
                }
            }
            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)
          //there is no need for the function I mentioned before ..
          var first = $('#wordGuess').text().substring(0,letterID);
          var second = $('#wordGuess').text().substring(letterID+1);
          $('#wordGuess').text(first+gWordAry[letterID]+second)
        }

startGame();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hangmanGame">
            <div id="wordGuess">  </div>  
            <table style="margin: auto;position: relative;top: 500px;">
                <tr> 
                    <td><button class="alphabet" type="button"> </button></td>
                    <td> <button type="button" onclick="guess('A')" id="1" class="alphabet">A </button></td> 
                    <td> <button type="button" onclick="guess('B')" id="2" class="alphabet">B </button></td>
                    <td> <button type="button" onclick="guess('C')" id="3" class="alphabet">C </button></td>
                    <td> <button type="button" onclick="guess('D')" id="4" class="alphabet">D </button></td>
                    <td> <button type="button" onclick="guess('E')" id="5" class="alphabet">E </button></td>
                    <td> <button type="button" onclick="guess('F')" id="6" class="alphabet">F </button></td>
                    <td> <button type="button" onclick="guess('G')" id="7" class="alphabet">G </button></td>
                    <td> <button type="button" onclick="guess('H')" id="8" class="alphabet">H </button></td>
                    <td> <button class="alphabet" type="button"> </button></td></tr>
                <tr> 
                    <td> <button class="alphabet" type="button"> </button></td>
                    <td> <button type="button" onclick="guess('I')" id="9" class="alphabet">I </button></td>
                    <td> <button type="button" onclick="guess('J')" id="10" class="alphabet">J </button></td>
                    <td> <button type="button" onclick="guess('K')" id="11" class="alphabet">K </button></td>
                    <td> <button type="button" onclick="guess('L')" id="12" class="alphabet">L </button></td>
                    <td> <button type="button" onclick="guess('M')" id="13" class="alphabet">M </button></td>
                    <td> <button type="button" onclick="guess('N')" id="14" class="alphabet">N </button></td>
                    <td> <button type="button" onclick="guess('O')" id="15" class="alphabet">O </button></td>
                    <td> <button type="button" onclick="guess('P')" id="16" class="alphabet">P </button></td>
                    <td><button class="alphabet" type="button"> </button></td></tr>
                <tr> <td> <button type="button" onclick="guess('Q')" id="17" class="alphabet">Q </button></td>
                    <td> <button type="button" onclick="guess('R')" id="18" class="alphabet">R </button></td>
                    <td> <button type="button" onclick="guess('S')" id="19" class="alphabet">S </button></td>
                    <td> <button type="button" onclick="guess('T')" id="20" class="alphabet">T </button></td>
                    <td> <button type="button" onclick="guess('U')" id="21" class="alphabet">U </button></td>
                    <td> <button type="button" onclick="guess('V')" id="22" class="alphabet">V </button></td>
                    <td> <button type="button" onclick="guess('W')" id="23" class="alphabet">W </button></td>
                    <td> <button type="button" onclick="guess('X')" id="24" class="alphabet">X </button></td>
                    <td> <button type="button" onclick="guess('Y')" id="25" class="alphabet">Y </button></td>
                    <td> <button type="button" onclick="guess('Z')" id="26" class="alphabet">Z </button></td> </tr>
            </table>
        </div>