Stop div from adding on every click

Question

I have a table with a background image that, when clicked, displays other images for the user to choose from. This is working and appears or hides on click events. However, when the user clicks to add a second image the menu of images appears again (as it should) but twice. I have commented out a solution I tried. I thought on first click I could display my_div and then delete it in allImages.onclick. This is throwing up a null error in Chrome, probably understandably. The problem here is similar. Hope I added link correctly. Anyway, advice or help appreciated.

function addImage(col) {
    var img = new Image();
    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");
            newList.appendChild(allImages);
            my_div = document.getElementById("showPics");
            my_div.appendChild(newList);
            my_div.style.display = 'block';

            allImages.onclick = function (e) {
                img.src = e.target.src;
                my_div.style.display = 'none';
                //var element = document.getElementById("showPics");
                //element.parentNode.removeChild(element);
            };
        }
    };
};
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);

If you run your code through http://jsbeautifier.org/, it appears to have an extra closing `};` before the looping. — jbabey, Jan 02 '13 at 18:36
It's part of a larger function so that's probably why. I can add it in if you think it will help. — Inkers, Jan 02 '13 at 18:39
Understood. Removed the extra `};` at the end and formatted your code. — jbabey, Jan 02 '13 at 18:42
So I think the problem is that I am only appending the images to the list and not appending the list to all of the images, or am I slowly going insane? Is this why, if I remove the div on allImages.onclick, I get Uncaught TypeError: Cannot call method 'appendChild' of null? Am I even approaching this the correct way? — Inkers, Jan 02 '13 at 22:51
You are creating image list everytime the parent image is clicked. Move out all the image creation out of img.onclick and remove img.onclick. — Jules, Jan 03 '13 at 03:46
Thanks Jules, I can't try it at the moment, but I think that if I do as you said and move the image list creation and the allImages.onclick function outside and show and hide the div with img.onclick this will work. Will try it later and check back. Thanks. — Inkers, Jan 03 '13 at 09:53

score 0 · Answer 1 · answered Jan 07 '13 at 03:23

I modified your code adding ul to hold all img. It works, but could be better.

   function addImage(col) {

        var img = new Image();
        img.src = "../www/images/TEST.png";
        col.appendChild(img);

        var myImages = new Array();
        myImages[0] = "../www/images/TEST1.png";
        myImages[1] = "../www/images/TEST2.png";
        myImages[2] = "../www/images/TEST3.png";

        var container = document.createElement("ul");  //ul to simplify hide/show
        container.style.display = "none";

        for (var i = 0; i < myImages.length; i++) {

            var newList = document.createElement("li");
            var im = document.createElement("img");
            im.src = myImages[i];
            newList.appendChild(im);

            im.onclick = function () {
                img.src = this.src;
            };
            container.appendChild(newList);
        }

        col.appendChild(container);

        col.onclick = function () {
            if (container.style.display == "none")
                container.style.display = "block";
            else
                container.style.display = "none";
        };
    }

Hi Jules. There is a working solution here http://stackoverflow.com/questions/14172370/passing-image-array-values-and-changing-image-source-onclick/14173096#14173096 Thanks for taking the time to help. — Inkers, Jan 07 '13 at 10:33

Stop div from adding on every click

1 Answers1