如何使用javascript打印已在hangman遊戲中猜出的字母？

Question

我知道編程以及JavaScript和我的劊子手遊戲工作了我的第一個項目的js。我似乎無法弄清楚如何向用戶展示他們已經猜到的字母。我想出了onkeyup函數來顯示最近選擇的字母，但不是全部。有什麼建議麼？

var alphabet = 
['a','b','c','d','e','f','g','h','g','h','i','j','k','l','m','n','o','p','q','r','s', 
't','u','v','w','x','y','z']; 
document.onkeyup = function(event) { 
    var key_press = String.fromCharCode(event.keyCode); 
    console.log(key_press); 
    document.getElementById('guessed-letters').innerHTML = key_press; 
}; 

Answer 1

就拿你有什麼在這裏

var alphabet = ['a','b','c','d','e','f','g','h','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; 

document.onkeyup = function(event) { 

    var key_press = String.fromCharCode(event.keyCode); 
    console.log(key_press); 
    document.getElementById('guessed-letters').innerHTML = key_press; 
}; 

而且只是這樣做：

var alphabet = ['a','b','c','d','e','f','g','h','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; 
var usedChars = []; 

document.onkeyup = function(event) { 

    var key_press = String.fromCharCode(event.keyCode); 
    console.log(key_press); 
    usedChars.push(key_press) 
    document.getElementById('guessed-letters').innerHTML = usedChars.toString(); 
}; 

Answer 2

更改該行：

document.getElementById('guessed-letters').innerHTML = key_press; 

這樣：

document.getElementById('guessed-letters').innerHTML += key_press; 

要達到你想要什麼。您將追加到現有的HTML而不是替換它。

Answer 3

var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split(''); 
 
var outputElement = document.getElementById('guessed-letters'); 
 
var guessedLetters = []; // stores the letters the user guessed 
 

 
document.addEventListener('keyup', function (event) { 
 
    var key = event.key.toLowerCase(); 
 
    if (alphabet.indexOf(key) !== -1) { 
 
    // the key is a letter in the alphabet 
 
    if (guessedLetters.indexOf(key) === -1) { 
 
     // the key has not been guessed 
 
     guessedLetters.push(key); 
 
     var string = guessedLetters.join(''); // join the letters together to one single string 
 
     outputElement.textContent = string; 
 
    } 
 
    } 
 
});

<span id="guessed-letters"></span>

或者使用jQuery：

var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split(''); 
 
var outputElement = $('#guessed-letters'); 
 
var guessedLetters = []; // stores the letters the user guessed 
 

 
$(document).on('keyup', function (event) { 
 
    var key = event.key.toLowerCase(); 
 
    if (alphabet.indexOf(key) !== -1) { 
 
    // the key is a letter in the alphabet 
 
    if (guessedLetters.indexOf(key) === -1) { 
 
     // the key has not been guessed 
 
     guessedLetters.push(key); 
 
     var string = guessedLetters.join(''); // join the letters together to one single string 
 
     outputElement.text(string); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="guessed-letters"></span>