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 'a-z' 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.
