htmlの各文字を表示するにはevent.keyをどのように取得するのですか？

Question

時間を割いていただきありがとうございます！

私はハングマンゲームに取り組んでおり、小さな問題にぶつかっています。 if else文の下にある文字以外の文字であれば、userInputを見ることができます。問題は、私がそのイベントを表示し、同時に表示されていない他のイベントを表示させたいということです。たとえば、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

この：あなたは、あなたがそれに追加し、完全に要素のinnerHTMLを置き換えるのではなく、しないように

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

：

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

は、このする必要があります。

そして、実際にコードを実行するたびにDOMを再スキャンする必要がないように、作業するDOM要素へのキャッシュされた参照を設定する必要があります。また、コードを読み書きするのがはるかに簡単になります。

そして、おそらく、そのキー押しが生成する文字ではなく、ユーザーが実際に押したキーを提供するkeyを使用したくないでしょう。代わりにkeyCodeとcodeを使用する必要があります（keyCodeが広くサポートされていますが、現在は広くサポートされていないcodeに置き換えられています）。

また、ユーザーの入力を受け取り、小文字に強制して、推測を文字と比較するときに大文字と小文字を区別しないようにすることを検討してください。

さらに、idは数字で始めることはできません。

最後に、あなたの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>