2013-07-03 72 views
0

我正在编写一个代码,这样人们可以点击一个图片,然后该点击的坐标可以记录在下面的表格中。每当我改变一些东西时,图片出现和工作或表出现。我无法弄清楚什么是错的。图片不会出现

下面是代码:你有

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

回答

1

一个问题是,您使用的是变量“i”两两件事:跟踪当前图像的,而执政迭代通过你的坐标表。但只有一个“我”,所以这将是一个问题。

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