Javascript 赢得图像'；不出现

我正在写一个代码，这样人们可以点击一个图像，然后点击的坐标可以记录在下表中。每当我改变一些东西，要么出现图片，要么出现表格。我想不出是怎么回事

代码如下：

var ready1 = prompt("Are you ready? Type yes or no.");
if (ready1 === "yes") {
    var images = [
        ["http://i.imgur.com/UygMnuU.jpg"],
        ["http://i.imgur.com/eq3ruIo.jpg"],
        ["http://i.imgur.com/6JEleqR.jpg"]
    ];
    var focuspoint = [];

    var xcoordinates = [];
    var ycoordinates = [];
    var coords = [];
    i = 0;

    slide = $("#slide");


    // var visualStatic = function () {
    //  setTimeout(function () {
    // static.show();
    //}, 5000);
    // slide.attr("src", images[i++]);
    //};



    slide.click(function () {
        if (i < (images.length + i)) {
            slide.attr("src", images[i++]);

            xcoordinates.push(e.pageX);
            ycoordinates.push(e.pageY);


        }
    }).trigger("click");
}
var cols = ["X Coords", "Y Coords"];
table = document.createElement("table"),
row = document.createElement("tr"),

// populate the coords array
coords.push(xcoordinates);
coords.push(ycoordinates);

// setup for the heading row by looping through columns
for (var c = 0; c < cols.length; c++) {
    td = document.createElement("td");
    td.innerHTML = cols[c];
    row.appendChild(td);
}
table.appendChild(row);

// now the columns are populated
for (var i = 0; i < coords[0].length; i++) {
    row = document.createElement("tr");
    for (var j = 0; j < coords.length; j++) {
        td = document.createElement("td");
        td.innerHTML = coords[j][i];
        row.appendChild(td);
    }
    table.appendChild(row);
}
document.body.appendChild(table);

var ready1=提示（“您准备好了吗？键入是或否”）；
如果（准备就绪1==“是”）{
变量图像=[
["http://i.imgur.com/UygMnuU.jpg"],
["http://i.imgur.com/eq3ruIo.jpg"],
["http://i.imgur.com/6JEleqR.jpg"]
];
var focuspoint=[]；
var xcoordinates=[]；
var ycoordinates=[]；
var-coords=[]；
i=0；
幻灯片=$（“幻灯片”）；
//var visualStatic=函数（）{
//setTimeout（函数（）{
//static.show（）；
//}, 5000);
//slide.attr（“src”，images[i++]）；
//};
幻灯片。单击（函数（）{
如果（i<（images.length+i））{
slide.attr（“src”，images[i++]）；
xcoordinates.push（e.pageX）；
ycoordinates.push（如pageY）；
}
}).触发（“点击”）；
}
var cols=[“X坐标”，“Y坐标”]；
table=document.createElement（“表”），
行=document.createElement（“tr”），
//填充coords数组
协调推送（xcoordinates）；
协调推进（ycoordinates）；
//通过循环列设置标题行
对于（var c=0；c

您遇到的一个问题是，您使用变量“i”来完成两件事：跟踪当前图像，以及通过坐标表控制迭代。但是只有一个“我”，所以这将是一个问题

此外，在事件处理程序中，检查“i”是否小于图像列表中的“i”。这几乎肯定是错误的，因为JavaScript数组索引的范围从零到小于长度的一个。（刚刚编辑以注意您添加的是“i”，而不是1；这似乎是错误的。因为“i”总是小于“i”，大于数组的长度（当“i”为正时），

if

测试将始终为真，最终您将从数组的末尾运行。）