Calling JavaScript function in Html

Question

I am new to Javascript and I would really appreciate your help . I am coding Hangman using JavaScript, Html, Css. I was able to genrate random Word ans also create placeholders based on the length. But when i am clicking on letter, i want to run the function which will check if word contains the letter, if yes it will place that letter in corresponding placeholder. This is how i am generating available letters. I am unable to run check function upon clicking

Here is the link to jsfiddle , Please advice!

document.write('<div class="letters">');

document.write('<table>');
document.write('<tr>');
document.write('<td>');

var alpha= new alphabetArray(); 
function alphabetArray() {

this[0] = "A";
this[1] = "B";
this[2] = "C";
this[3] = "D";
this[4] = "E";
this[5] = "F";
this[6] = "G";
this[7] = "H";
this[8] = "I";
this[9] = "J";
this[10] = "K";
this[11] = "L";
this[12] = "M";
this[13] = "N";
this[14] = "O";
this[15] = "P";
this[16] = "Q";
this[17] = "R";
this[18] = "S";
this[19] = "T";
this[20] = "U";
this[21] = "V";
this[22] = "W";
this[23] = "X";
this[24] = "Y";
this[25] = "Z";
}

var err=0;
for (i=0; i<26; i++)

//document.write('<a href="#" onClick="check('+alpha[i]+')";/>'+alpha[i]+ " "  +'</a>');
//document.write('<input type="submit" ;onClick=check('+this.alpha[i]+'); value='+alpha[i]+'>');
document.write('<input type=\"submit\" onClick=\"javascript:check('+alpha[i]+')\" value='+alpha[i]+'>');
document.write('</td>');
document.write('</tr>');


var words=['acres','adult','brick','calm','canal','claws','coach','constantly','contrast','cookies','customs'];
function chooseWords(){
var ranWord=words[Math.floor(Math.random() * words.length)];
return ranWord;
}
function fillBlanks(word){
var res=" ";
for(j=0;j<word.length;j++){
res= "_   " + res;
}
return res;
}
document.write('<tr>');
document.write('<td>');

var answer=chooseWords();
document.write(answer);

var output=fillBlanks(answer);
var res1=output.split(" ");
document.write('<div id=1><font size=15 ><b>'+output +'</b></font></div>');
document.write('</td>');
document.write('</tr>');
document.write('</table>');
document.write('</div>');
document.write('<div class="hangArea">');
document.write('<div class="top">'); document.write('</div>');
document.write('<div class="left">');document.write('</div>');
document.write('<div class="base">');document.write('</div>');
document.write('</div>');
document.write('<div class="drawarea">');
document.write('<div class="rope">');document.write('</div>');
document.write('<div class="head">');document.write('</div>');
document.write('<div class="body>');document.write('</div>');
document.write('<div class="leftarm">');document.write('</div>');
document.write('<div class="rightarm">');document.write('</div>');
document.write('<div class="leftleg">');document.write('</div>');
document.write('<div class="rightleg>');document.write('</div>');
document.write('</div>');

f
function check(alpha){
for(i=0;i<answer.length;i++){
document.write(alpha);
if(answer.charAt(i)===alpha.toLowerCase()){
res1[i]=alpha;
document.write(res1[i]);

document.getElementById('1').innerHTML=res1[i];
}
}
}

Please guide!

Answer 1

It's very useful to think of the problem in terms of strings (or arrays of characters), after all that's what you're dealing with. Then when you get a working prototype you can mix it with the DOM and its methods, otherwise it all becomes a mess quickly.

The steps and implementation of the game of hangman could be:

1. Guess a letter. if letter exists replace placeholder with letter or else do nothing.
2. Be able to guess more letters until all letters have been revealed.
3. Inform the user of the progress so far.

An implementation of this idea:

var hangman = function(word) {
  // String revealed so far, as an array
  var result = word.replace(/./g, '_').split('');
  return {
    guess: function(letter) {
      // If word contains letter then replace
      // placeholder with letter
      for (var i=0; i<word.length; i++)
        if (word[i].toLowerCase() == letter)
          result[i] = letter;
      return this; // chain
    },
    get: function(f) {
      f = f || function(){};
      var done = result.indexOf('_') == -1;
      return f.call(this, result.join(''), done);
    }
  };
};

And you use it like:

var soFar = function(result, done) {
  // Interact with DOM here
  if (done) {
    console.log('Congrats! The word is :'+ result);
    return result;
  }
  console.log('Word so far: '+ result);
  return this;
};

// Value from the DOM
var word = document.getElementById('#word').value;

var game = hangman(word) // assume word = "hello"
  .guess('l')
  .guess('o')
  .get(soFar);
  //^ Word so far: __ell

console.log(game); //=> {guess: [Function], get: [Function]}

// Play more
game = game
  .guess('e')
  .guess('h')
  .get(soFar);
  //^ Congrats! The word is: hello

console.log(game); //=> hello