在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