Изображения не отображаются

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» больше, чем список изображений. Это почти наверняка неправильно, потому что индексы массива JavaScript колеблются от нуля до одного меньше, чем длина. (Просто отредактировано, чтобы отметить, что вы добавляете «i», а не 1, что действительно кажется неправильным. Поскольку «i» всегда будет меньше, чем «i» больше, чем длина массива (когда «i» является положительным) тест if всегда будет правдой, и в конце концов вы сбегаете с конца массива.)