Question

我正在尝试创建一个基本的Hangman程序。它是一个标签数组，分配给一个对象数组（称为按钮）。每个图像都是一个字母的图像，所以例如你按下'L'按钮，它会检查这是否在WordArray（这是一个字符数组），然后它会相应地行动（隐藏字母，然后根据需要更新绞架图像。

我无法获取图像的onclick方法来访问checkinarray函数。我做错了什么？

var LetterAmount = 3; //make this 26. checked.
var WordArray = new Array();
var Buttons = new Array();

function checkinarray(num){
var z = 0;
while (z<4){
  document.write("looping through word now");
    if (num == WordArray[z]){
    document.write("<br/>it is in the word");
    }
  z++;
  }
}

function ButtonClicked(){
this.Image.src = "images/blank.jpg";
checkinarray(this.Number);
}
function Button(Image, Number) {
this.Image = Image;
this.Number = Number;
this.ButtonClicked = ButtonClicked;
}
function initialiseletters(){
var x;
//set up empty img tags for use
  for(i = 0; i < LetterAmount; i++) {
  document.write("<img id=" + i + ">");
  }
  for(x = 0; x < LetterAmount; x++) {
  document.images[x].src = "images/" + x + ".jpg";
  document.getElementById(x).onclick =function(){
  Buttons[this.id].ButtonClicked();
  } 
Buttons[x] = new Button(document.images[x], "" + x); 
}
}

function initialiseword(){
 //WordArray = new Array();
 WordArray[0] = 0;
 WordArray[1] = 1;
 WordArray[2] = 2;
 WordArray[3] = 3;
}

function initialise(){
initialiseword();
initialiseletters();
document.write("testing overall");
}

Answer 1

我没有看到ButtonClicked调用checkinarray时出现问题，但我发现checkinarray出现问题 - 在页面呈现后调用document.write完成（例如，当用户点击时），这将无法工作。您需要通过DOM方法修改DOM（如果您使用Prototype，jQuery，MooTools，Dojo，Closure Library，YUI等工具包，这将变得更加容易。）

Answer 2

    document.getElementById(x).onclick =function(){
    Buttons[this.id].ButtonClicked();
    }

你的问题出在哪里。 'this.id'未定义。

document.write不是向DOM添加元素的好方法...尝试document.createElement（'img'）;

然后你已经像这样引用了这个图像：

var img = document.createElement('img');
img.onclick = function()
{
    //your click...
}
//add it to the view stack
document.body.appendChild(img);

从Javascript对象（Javascript）中访问函数

2 个答案: