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

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]}`,行： class: `blank-box guess-result-${lettersOfWordArray[i]}`,和$(`.guess-result-${userGuess}`).each(function(i, e) { e.append(userGuess) })

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

我添加了一个 input 元素并从中设置了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 个解决方案

解决方案1
0 2018-11-13 14:45:09

解决方案2
0 2018-11-14 14:16:18

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

问题描述

2 个解决方案

解决方案1 0 2018-11-13 14:45:09

解决方案2 0 2018-11-14 14:16:18

解决方案1
0 2018-11-13 14:45:09

解决方案2
0 2018-11-14 14:16:18