Question

这是供子手使用的，当用户猜测正确的字母时，我希望能够将该字母追加到我以该字母的ID动态创建的div上。

$(document).ready(function() {
  console.log("ready!");

  possibleGuessArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
  userGuessArray = [];
  correctGuessArray = [];



  var randomWords = [
    "dog",
    "cat",
    "america",
    "bootcamp",
    "javascript",
    "philadelphia"
  ]
  var word = randomWords[Math.floor(Math.random() * randomWords.length)]; {
    console.log(word);
  }
  var amount = word.length;
  console.log(amount);

  $("#display-word").on("click", function(event) {
    $("#word").html("New Word is: " + amount + " letters long.")
  })


  var str = word;
  var lettersOfWordArray = str.split("");
  console.log(lettersOfWordArray);


  for (var i = 0; i < lettersOfWordArray.length; i++) {
    jQuery('<div/>', {
      class: "blank-box",
      value: i,
      id: lettersOfWordArray[i]
    }).appendTo("#word-guessed");
  }

  var ids = [];
  $(".blank-box").each(function() {
    ids.push(this.id);
  });
  console.log("ids: " + ids);

  //if the letter guessed equals the id of the div, append the user guess to that div


  //event listener 
  document.onkeyup = function(event) {
    var userGuess = event.key;



    if (userGuessArray.includes(userGuess) || correctGuessArray.includes(userGuess)) {

      confirm("You have already guessed letter " + userGuess);

    } else {

      if (possibleGuessArray.includes(userGuess)) {
        if (word.includes(userGuess)) {
          console.log(userGuess + " is correct");
          correctGuessArray.push(userGuess);





        } else {
          $("#guesses").append(userGuess + "-");
          console.log("You guessed the wrong letter");
          userGuessArray.push(userGuess);
          console.log(userGuessArray);
        }


      } else {
        confirm(userGuess + "is not a valid guess. Please enter a letter!")
      }




    } //end of else for userGuessArray.includes(userGuess)

  } //document on key up

}); //document.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

不需要检查ID值，可以如下进行。还添加了运行代码段。

var str = 'word';
var lettersOfWordArray = str.split("");
var correctGuess=[];



for (var i = 0; i < lettersOfWordArray.length; i++) {
    jQuery('<div/>', {
        class: "blank-box",
        value: i,
        id: lettersOfWordArray[i]
    }).appendTo("#word-guessed");
}

document.onkeyup = function (event) {
    var userGuess = event.key;

    if (correctGuess.includes(userGuess)) {
        confirm("You have already guessed letter " + userGuess);
    } else {
   
                console.log(userGuess + " is correct");
                var correctLetter = userGuess;
 
                correctGuess.push(userGuess);   
    
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="word-guessed">  </div>
</body>
</html>

Answer 2

我相信下面的代码可以做一些您想要做的事情。唯一真正重要的变化是行： class: `blank-box guess-result-${lettersOfWordArray[i]}`, 和 $(`.guess-result-${userGuess}`).each(function(i, e) { e.append(userGuess) })

这些方法设置类而不是猜测结果的ID，然后在其中附加被猜测的字母。通常，当您要选择多个元素（并且可能有多个相同字母）时，最好使用class而不是id

我添加了一个输入元素，并从中设置了keyup事件，而不是document。对我来说，document上的某些按键似乎听不到正确的声音，但是如果那里没有问题，那么document应该没问题。

$(document).ready(function() {
  console.log("ready!");

  possibleGuessArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
  userGuessArray = [];
  correctGuessArray = [];

  var randomWords = [
    "dog",
    "cat",
    "america",
    "bootcamp",
    "javascript",
    "philadelphia"
  ]
  var word = randomWords[Math.floor(Math.random() * randomWords.length)]; {
    console.log(word);
  }
  var amount = word.length;
  console.log(amount);

  $("#display-word").on("click", function(event) {
    $("#word").html("New Word is: " + amount + " letters long.")
  })


  var str = word;
  var lettersOfWordArray = str.split("");
  console.log(lettersOfWordArray);


  for (var i = 0; i < lettersOfWordArray.length; i++) {
    jQuery('<div/>', {
      class: `blank-box guess-result-${lettersOfWordArray[i]}`,
      value: i,
      id: lettersOfWordArray[i]
    }).appendTo("#word-guessed");
  }

  var ids = [];
  $(".blank-box").each(function() {
    ids.push(this.id);
  });
  console.log("ids: " + ids);

  //if the letter guessed equals the id of the div, append the user guess to that div


  var inputElement = document.getElementById('letter-input');

  //event listener 
  inputElement.onkeyup = function(event) {
    var userGuess = event.key;



    if (userGuessArray.includes(userGuess) || correctGuessArray.includes(userGuess)) {

      confirm("You have already guessed letter " + userGuess);

    } else {

      if (possibleGuessArray.includes(userGuess)) {
        if (word.includes(userGuess)) {
          console.log(userGuess + " is correct");
          correctGuessArray.push(userGuess);
          $(`.guess-result-${userGuess}`).each(function(i, e) {
            e.append(userGuess)
          })
        } else {
          $("#guesses").append(userGuess + "-");
          console.log("You guessed the wrong letter");
          userGuessArray.push(userGuess);
          console.log(userGuessArray);
        }


      } else {
        confirm(userGuess + "is not a valid guess. Please enter a letter!")
      }




    } //end of else for userGuessArray.includes(userGuess)

  } //document on key up

}); //document.ready

#word-guessed {
  font-family: arial;
}

#word-guessed div {
  display: inline-block;
  width: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="word-guessed"></div>
<input id="letter-input" />

如何检查用户输入是否等于javascript中div元素的ID？

2 个答案: