Comment obtenir event.key pour afficher chaque lettre dans mon code HTML?

Question

Merci d'avoir pris le temps de nous aider! Je travaille sur un jeu de pendu et je suis confronté à un petit problème. Je suis capable de voir le userInput s'il s'agit d'une autre lettre que ce qui est ci-dessous dans mes instructions if else. Le problème est que je veux qu'il affiche cet événement, puis affiche tout autre événement qui n'a pas déjà été saisi pour être affiché à côté. Par exemple: si userInput est === "k" alors userInput est === "b", je voudrais qu'il garde l'affichage de "k" dans mon html et ensuite "b".

De plus, s'il y a une meilleure façon d'écrire mon instruction if else avec une boucle ou en utilisant forEach cela serait utile. Je suis nouveau aux concepts. Merci encore.

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

Ce:

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

devrait être le suivant:

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

Alors que vous ne remplacez pas innerHTML de l'élément complètement, mais plutôt, vous ajoutez à cela. Et, vous devriez vraiment mettre en place des références en cache aux éléments DOM avec lesquels vous allez travailler afin de ne pas avoir à re-balayer le DOM chaque fois que le code s'exécute. Cela rend également le code beaucoup plus simple à lire/écrire.

Et, vous ne voulez probablement pas utiliser key qui vous fournira la clé réelle que l'utilisateur a appuyée, plutôt que le caractère que cette touche produit. Au lieu de cela, vous devez utiliser keyCode et code (keyCode est largement supporté mais est en train d'être remplacé par code, qui n'a pas encore de support étendu). En outre, envisagez de prendre les données de l'utilisateur et de les forcer à les mettre en minuscules de sorte que lorsque vous comparez leur estimation à une lettre, il s'agit d'une estimation insensible à la casse. En outre, id s ne peut pas commencer par un nombre.

Enfin, votre if/code `autre » fonctionne, mais il peut être rationalisée comme vous le verrez dans mon exemple ci-dessous:

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