如何使用javascript打印在子手游戏中已经猜到的字母？

Question

I am knew to programming as well as javascript and am working on the hangman game for my first js project. I can't seem to figure out how to show the user in the UI the letters they have already guessed. I figured out the onkeyup function to show the most recent letter chosen but not all of them. Any suggestions?

 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

Take what you have here

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;
};

And just do this:

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

Changing this line:

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

to this:

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

should achieve what you want. You'd be appending to the existing HTML instead of replacing it.

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> 

Or using 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>