Javascript Hangman game

Question

Working on a hangman game using javascript coding, and i've been running into some trouble. Here's what I'm trying to do. I've created two arrays holding the word to solve for and one containing all the letters in the alphabet. Now I want when the letters chosen by the user match the letters found in the word, it not only shows up, it checks to see what position the the guessed letter should be in. To do this I'm using a double For loop though that could be the wrong way to go about it. any help pointing in the right direction would be awesome!

//JavaScript document
var answer = new Array('h', 'a', 'n', 'g', 'm', 'a', 'n');
var letters = new Array("a", "b ", "c ", "d ", "e ", "f ", "g ", 'h', "i ", "j ", "k ", "l ", "m ", "n ", "o ", "p ", "q " ,"r " ,"s ", "t ", "u ", "v ", "w ", "y ", "x "); 

onload = init;
function init(){
    updateDisplay();
document.getElementById("guess_button").onclick= 
function(){
    enter();
 }
}
function enter(){
    var list1 = "";
    var letter = document.getElementById("guess_text").value
    var box = document.getElementsByClassName("answer_char")
    if(letter == answer){
    for (var i = 0; i < answer.length; i++) {
        for(var j = 0; j < box.length; j++){
              if(answer[i] == box[j]) {
                      list1+= letter
                  }
              }
            box[j].innerHTML = list1
        }

  }
 }

function updateDisplay(){
    var list = " ";
  for(var i = 0; i < letters.length; i++){
        list += letters[i]
    }
document.getElementById("letter_pool").innerHTML = list
}

Answer 1

I think there are a couple improvements you can make using some regex and a couple if statements. Also for the sake of saving a few characters I usually use [] to initialize an array, that said new Array() is perfectly correct. Change this to use regex to match against letters.

//JavaScript document
var answer = new Array('h', 'a', 'n', 'g', 'm', 'a', 'n');
var letters = new Array("a", "b ", "c ", "d ", "e ", "f ", "g ", 'h', "i ", "j ", "k ", "l ", "m ", "n ", "o ", "p ", "q " ,"r " ,"s ", "t ", "u ", "v ", "w ", "y ", "x "); 

onload = init;
function init(){

I would remove this and just include the text in your HTML document.

    updateDisplay();

enter() doesn't need to be a separate here unless you want to call it somewhere else, you can just have it be the click function for the guess_button click

    document.getElementById("guess_button").onclick= 
    function(){
        enter();
    }
}
function enter(){
    var list1 = "";
    var letter = document.getElementById("guess_text").value
    var box = document.getElementsByClassName("answer_char")

letter isn't going to equal answer considering letter is a string and answer is an array.

    if(letter == answer){

Using some if statements you can cut down on these for loops and make it easier to place the letter into the right spot

        for (var i = 0; i < answer.length; i++) {
            for(var j = 0; j < box.length; j++){
                if(answer[i] == box[j]) {
                    list1+= letter
                }
            }
            box[j].innerHTML = list1
        }
    }
}

I would remove this and just put 'az' in your HTML file, it produces the same result ultimately.

function updateDisplay(){
    var list = " ";
    for(var i = 0; i < letters.length; i++){
        list += letters[i]
    }
    document.getElementById("letter_pool").innerHTML = list
}

If you want to keep track of guessed letters, you can create a function for this that is called on the guess event.

Here's what I would end up using. Uses String.prototype.match() . This assumes answer and answerLetters are the same length, your code assumed this so I figured it was safe but there are ways to write this to account for possible different lengths or automatically building the answerLetters based on answer length.

var answer = ['h','a','n','g','m','a','n'];
var letters = /^[a-zA-Z]*$/; 
var answerLetters = document.getElementsByClassName("answer_char");

// Redude this to just a click event, naming the function `enter` in 
// case we want to use it later
document.getElementById("guess_button").onclick = function enter() {
    var userGuess = document.getElementById("guess_text").value;

    // This uses String.prototype.match() to see if the user's guess
    // is actually a letter. Not needed, but nice error handling.
    // Also tests to see if the guess is just one character.
    if (userGuess.match(letters) && userGuess.length === 1) {
        for (var i = 0; i < answer.length; i++) {
            if (userGuess === answer[i])
                // Because answerLetters and answer are the same length we
                // know that answer[i] correlates to answerLetters[i].
                answerLetters[i].innerHTML = userGuess;
        }
    } else {
        throw new Error('User did not enter an English letter or entered more than one character.');
    }
}

You can also use some clever regex instead of that for loop to figure out where all of the locations the userGuess is inside of the answer . More info on this in another question. You can then use the indecies of that answer I just linked in the same way we used answerLetters[i].innerHTML = userGuess; . This would allow you to enter answer as a string instead of as an array as it is written currently. I can write a snippet of this for you if you want.