如何获取event.key以显示我的html中的每个字母？

Question

感谢您花时间帮忙！

我正在做一个hang子手游戏，并遇到一个小问题。 我能够看到userInput，如果它是任何其他字母，而不是我的if else语句中的以下内容。问题是我希望它显示该事件，然后显示任何尚未键入的其他事件以便一起显示。例如：如果userInput是===“k”，那么userInput是===“b”，我希望它在我的html中保持“k”的显示，然后沿着它“b”。

此外，如果有更好的方法来编写我的if else语句与循环或使用forEach，这将是有益的。我对这些概念很陌生。 再次感谢。

document.onkeyup = function(event) { 
      var userInput = event.key;
 

     if (currentWord === "taco"){ 

      if (userInput === "t") { 

       document.getElementById("1st-letter").innerHTML = userInput; 
      } 

      else if (userInput === "a") { 

       document.getElementById("2nd-letter").innerHTML = userInput; 

       } 

      else if (userInput === "c") { 

       document.getElementById("3rd-letter").innerHTML = userInput; 

      } 

      else if (userInput === "o") { 
       document.getElementById("4th-letter").innerHTML = userInput; 
      } 


      else { 
       document.getElementById("incorrect-letters").innerHTML = userInput; 

      } 
     } 
     else { 
      alert("Code is working"); 
     } 


}; 

Answer 1

此：

document.getElementById("incorrect-letters").innerHTML = userInput; 

应该是这样的：

document.getElementById("incorrect-letters").innerHTML = 
    document.getElementById("incorrect-letters").innerHTML +userInput; 

，这样你就不会替换元素的innerHTML完全，而是你添加到它。

而且，您应该真正设置对您将要使用的DOM元素的缓存引用，以便您不必在每次运行代码时重新扫描DOM。它还使得代码读/写更简单。

而且，您可能不想使用key，它将为您提供用户按下的实际按键，而不是按键产生的字符。相反，您应该使用keyCode和code（keyCode已得到广泛支持，但正在被替换为code，但尚未得到广泛支持）。

另外，考虑用户的输入并强制它为小写，这样当您将他们的猜测与字母进行比较时，这是一个不区分大小写的猜测。

此外，id s不能以数字开头。

最后，您if /`别人的代码工作，但它可以简化您将在下面我举的例子看：

// Wait until the DOM is fully loaded and then run the function 
 
window.addEventListener("DOMContentLoaded", function(){ 
 

 
    // Set up variable to cache reference to the DOM elements we'll be using 
 
    var incorrectLetters = document.getElementById("incorrect-letters"); 
 
    var guesses = document.getElementById("guesses"); 
 
    
 
    // Find all the letter element containers: 
 
    var containers = document.querySelectorAll(".letter"); 
 
    var foundCount = 0; 
 

 
    // Set up the secret word 
 
    var currentWord = "taco"; 
 
    
 
    document.onkeyup = function(event) { 
 
    
 
     // event.keyCode and event.code return the numeric code for the character 
 
     // they produce. When passed to String.fromCharCode(), we get the actual 
 
     // character that was produced by the key input, but this excludes keystrokes 
 
     // that don't produce a visible character (space, backspace, tab, enter, etc.) 
 
     // From there, we convert that character to lower-case. 
 
     var userInput = String.fromCharCode(event.keyCode || event.code).toLowerCase(); 
 
     var found = false; 
 

 
     // Check input to see if it is in the secret word array and, if so, 
 
     // print the input in the correct position 
 
     
 
     // Loop through each letter in the array 
 
     for(var i = 0; i < currentWord.length; ++i){ 
 
     
 
     // Check the input against the current letter we're looping over 
 
     if(userInput === currentWord[i]){ 
 
      
 
      // We have a match, put the letter in the container that is in the same 
 
      // position in the array as it is in the word 
 
      containers[i].textContent = userInput; 
 
      
 
      // Flag that we have a matched letter and up the matched letter count 
 
      found = true; 
 
      foundCount++; 
 
     } 
 
     } 
 
     
 
     // If all letters have been found, change display to show a winner 
 
     if(foundCount === containers.length){ 
 
     guesses.classList.add("winner"); 
 
     } 
 
     
 
     // If the input wasn't found after looping, write it in the bad guesses area 
 
     if(!found) { incorrectLetters.innerHTML = incorrectLetters.innerHTML + userInput; } 
 

 
    }; 
 
    
 
});

#incorrect-letters { 
 
    border:2px dashed blue; 
 
    background-color:rgba(100,200,100,.75); 
 
    height:1.5em; 
 
    font-family:monospaced; 
 
    letter-spacing:.75em; 
 
    font-weight:bold; 
 
    line-height:1.5em; 
 
    font-size:1.5em; 
 
    padding:0 10px; 
 
} 
 

 
.letter { 
 
    float:left; 
 
    border-bottom:2px solid black; 
 
    font-size:2em; 
 
    color:green; 
 
    width:2em; 
 
    height:1em; 
 
    margin-right:1em; 
 
    text-align:center; 
 
} 
 

 
.winner { 
 
    background-color:yellow; 
 
    border:5px solid green; 
 
    height:2.5em; 
 
}

<p>Click on the document and type your letter guess</p> 
 
<p>Bad guesses:</p> 
 
<div id="incorrect-letters"></div> 
 

 
<p>Correct guesses:</p> 
 
<div id="guesses"> 
 
    <div class="letter" id="firstLetter"></div> 
 
    <div class="letter" id="secondLetter"></div> 
 
    <div class="letter" id="thirdLletter"></div> 
 
    <div class="letter" id="fourthLetter"></div> 
 
</div>