CODEWITHSUNDEEP
javascript
Lonnie White
Lonnie White

Reputation: 1

How do I print the letters already guessed in the hangman game with javascript?

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

Upvotes: 0

Views: 323

Answers (3)

PeterMader
PeterMader

Reputation: 7285

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>

Upvotes: 0

jdmdevdotnet
jdmdevdotnet

Reputation: 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();
};

Upvotes: 4

Jeremy
Jeremy

Reputation: 521

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.

Upvotes: 3

Related Questions