Wie bekomme ich event.key, um jeden Buchstaben in meinem HTML anzuzeigen?

Question

Vielen Dank, dass Sie sich die Zeit genommen haben, uns zu helfen!

ich auf einem Hangman Spiel arbeitete und in ein kleines Problem leite. Ich bin in der Lage, den userInput zu sehen, wenn es ein anderer Buchstabe ist, als in meinen if else-Anweisungen. Das Problem ist, dass ich dieses Ereignis anzeigen und dann jedes andere Ereignis anzeigen soll, das noch nicht angezeigt wurde. Zum Beispiel: Wenn userInput === "k" ist, dann ist userInput === "b", ich möchte, dass die Anzeige von "k" in meinem HTML und dann daneben "b" bleibt.

Auch wenn es eine bessere Art und Weise meiner wenn else-Anweisung mit einer Schleife oder mit forEach zu schreiben, die hilfreich sein würden. Ich bin neu in den Konzepten. Danke nochmal. Diese

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; 

sollte dies sein:

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

Damit Sie ersetzen nicht das Element des innerHTML vollständig, sondern Sie etwas hinzufügen.

Und Sie sollten wirklich im Cache gespeicherten Verweise auf die DOM-Elemente einrichten, die Sie mit arbeiten werden, so dass Sie auf dem DOM nicht erneut scannen jedes Mal, wenn der Code ausgeführt wird. Es macht auch den Code viel einfacher zu lesen/schreiben.

Und wahrscheinlich möchten Sie nicht key verwenden, die Ihnen den tatsächlichen Schlüssel, den der Benutzer gedrückt hat, zur Verfügung stellen, anstatt das Zeichen, das dieser Tastendruck erzeugt. Stattdessen sollten Sie verwenden keyCode und code (keyCode breit abgestützt ist, ist aber in den Prozess der durch code ersetzt, die nicht breite Unterstützung noch hat).

Bedenken Sie auch die Eingabe des Benutzers zu nehmen und zwingt ihn Fall zu senken, so dass, wenn Sie ihre Vermutung gegen einen Brief vergleichen, es ist ein Groß- und Kleinschreibung Vermutung.

, zusätzlich id s kann nicht mit einer Zahl beginnen.

Schließlich Ihr if/`else‘ Code funktioniert, aber es kann rationalisiert werden, wie Sie in meinem Beispiel unten sehen werden:

// 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>