在Html中調用JavaScript函數

Question

我是JavaScript新手，我非常感謝您的幫助。 我正在編寫使用JavaScript，Html，Css的Hang子手。 我能夠隨機創建Word並根據長度創建佔位符。但是當我點擊字母時，我想運行檢查單詞是否包含該字母的功能，如果是，則會將該字母放在相應的佔位符中。 這是我如何生成可用的字母。 單擊後無法運行檢查功能

這是鏈接到jsfiddle, 請指教！

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

請指導！

Answer 1

根據字符串（或字符數組）來考慮問題非常有用，畢竟這就是你正在處理的問題。然後，當你得到一個工作原型時，你可以將它與DOM及其方法混合在一起，否則它會很快變得混亂。

的步驟和實施劊子手的遊戲可能是：

1. 猜一個字母。如果存在信件，則用字母替換佔位符，否則什麼也不做。
2. 能夠猜出更多字母，直到所有字母被顯示。
3. 通知用戶目前的進度。

這個想法的實現：

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

而且你使用它像：

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