Change node image with image from array onclick

Question

I am displaying the images from the array. I want the user to be able to choose an image from the array and for it to replace the current image img.src in the table. I have managed to show the user the image choices when a cell is clicked, but unsure where to go from here. I have tried a clickhandler on the array image but the alert is only showing when last image in array is clicked. Confused. All help appreciated.

  function addImage (col) {
var img = new Image();  // Note that a new img variable will be declared each time this function is called
img.src = "../www/images/TEST.png";
col.appendChild(img); 
img.onclick = function () {
    var myImages = new Array();
    myImages[0] = "../www/images/TEST3.png";
    myImages[1] = "../www/images/TEST2.png";
    myImages[2] = "../www/images/TEST4.png";

    for (var i = 0; i < myImages.length; i++) {
        var allImages = new Image();
        allImages.src=myImages[i];


        var newList = document.createElement("ul");
        var newContent = allImages;
        newList.appendChild(newContent); 
        my_div = document.getElementById("showPics");
        document.body.insertBefore(newList, my_div);
        };

        allImages.onclick = function(){

        alert("the click is working");//it is but only for the last image...grrrrr
        };
        //this.src = ????;
       };
      };

     for (r = 0; r < howOften; r++) {
     row = table.insertRow(-1);
    for (c = 0; c < numDays; c++) {
    col = row.insertCell(-1);
    addImage(col);
     };
    };
     document.getElementById('holdTable').appendChild(table);
    };

unrelated suggestion... there's no reason to include the ; after the closing } in your blocks. Makes for ugly code IMHO. — ic3b3rg
– ic3b3rg, Commented Jan 2, 2013 at 14:37

Grinn · Accepted Answer · 2013-01-02 16:25:49Z

2

For starters, you need to move your click assignment inside your loop:

function addImage(col) {
    var img = new Image(); // Note that a new img variable will be declared each time this function is called
    img.src = "../www/images/TEST.png";
    col.appendChild(img);
    img.onclick = function() {
        var myImages = new Array();
        myImages[0] = "../www/images/TEST3.png";
        myImages[1] = "../www/images/TEST2.png";
        myImages[2] = "../www/images/TEST4.png";

        for (var i = 0; i < myImages.length; i++) {
            var allImages = new Image();
            allImages.src = myImages[i];


            var newList = document.createElement("ul");
            var newContent = allImages;
            newList.appendChild(newContent);
            my_div = document.getElementById("showPics");
            document.body.insertBefore(newList, my_div);
            allImages.onclick = function(e) {
                img.src = e.target.src;
            };

        };

        //this.src = ????;
    };
};

for (r = 0; r < howOften; r++) {
    row = table.insertRow(-1);
    for (c = 0; c < numDays; c++) {
        col = row.insertCell(-1);
        addImage(col);
    };
};
document.getElementById('holdTable').appendChild(table);
};

...but the code you have will re-assign your click handlers every time an image is clicked, as well as recreating your DOM (HTML) elements. You might want to consider instead having it only hide/show my_div on subsequent clicks.

edited Jan 2, 2013 at 16:25

answered Jan 2, 2013 at 14:05

Grinn

5,56340 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Inkers Over a year ago

Hi Grinn, I have been trying to figure out the hide(); and show(); methods. my_div.show(); is not working for me. I understand that I want to show the div with img.onclick and then for it to hide once the user has picked an image. I'm stumped when it comes to implementing it however. Can you point me to any good examples, most seem to use jQuery.

Inkers Over a year ago

On the other problem, when an image is clicked, it is successfully passing an image back to the img.src, but again I am only getting TEST4.png to appear.

Grinn Over a year ago

If you're avoiding jQuery, hide would be my_div.style.display = 'none';, show would be my_div.style.display = 'block';

Grinn Over a year ago

@Inkers: I'm guessing that you're using allImages.src inside of your onclick. This will always contain the last assignment to allImages since it's now being called after all iterations have completed. What you need to do is use the event's target, instead. I've updated my answer to give you an example. Hope this helps. Don't forget to choose my answer if it does!

Inkers Over a year ago

Hey Grinn, these things always seem simple in hindsight. I am still learning so some of these methods like target etc are completely new to me. Thanks for your help. The show and hide are working but when I click another node it shows the div again but twice. I will figure it out though. Thanks again.

|

Collectives™ on Stack Overflow

Change node image with image from array onclick

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related