JavaScript Calling JavaScript function in Html calling javascript function from html,calling javascript function from php,

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 target='_blank' 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!