Question

我正在编写一个代码，以便人们可以点击图像，然后可以在下表中记录该点击的坐标。每当我改变某些东西时，图片就会出现并正常工作或表格出现。我无法弄清楚出了什么问题。

以下是代码：

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

Answer 1

你遇到的一个问题是你使用变量“i”来做两件事：跟踪当前图像，并通过坐标表控制迭代。然而，只有一个“我”，这将是一个问题。

此外，在您的事件处理程序中，您检查“i”是否比图像列表小于“i”。这几乎肯定是错误的，因为JavaScript数组索引的范围从零到一个比长度短。（刚编辑注意到你正在添加“i”，而不是1;这看起来确实是错误的。因为“i”总是小于“i”而不是数组的长度（当“i”为正时）， if测试将始终为真，最终您将在数组末尾运行。）

图像不会出现

1 个答案: