在HTML中調用JavaScript函數

Question

我是Java語言的新手，非常感謝您的幫助。 我正在使用JavaScript，Html，Css對Hangman進行編碼。 我能夠生成隨機單詞，也可以根據長度創建占位符。 但是，當我單擊字母時，我想運行該功能，該功能將檢查單詞是否包含字母，如果是，它將把該字母放置在相應的占位符中。 這就是我生成可用字母的方式。 單擊后無法運行檢查功能

這是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