CODEWITHSUNDEEP
javascriptimagedynamic
user2521045
user2521045

Reputation: 1

Images won't appear

I am writing a code so that way people can click on an images and then coordinates of that click can be recorded in a table below. Whenever I change something either the pictures appear and work or the table appears. I cannot figure out what is wrong.

Here is the code:

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

Upvotes: 0

Views: 49

Answers (1)

Pointy
Pointy

Reputation: 413737

One problem you've got is that you're using a variable "i" for two things: to keep track of the current image, and to govern the iteration through your table of coordinates. There's only one "i" however so that's going to be a problem.

Also, in your event handler you check to see if "i" is less than "i" more than the image list. That's almost certainly wrong, because JavaScript array indexes range from zero through one less than the length. (Just edited to note that you're adding "i", not 1; that really seems wrong. Because "i" will always be less than "i" more than the length of the array (when "i" is positive), the if test will always be true and eventually you'll run off the end of the array.)

Upvotes: 1

Related Questions