javascript - onclick happening onload?

Question

so I'm a javascript newbie. I really have no idea what I'm doing. I'm trying to apply an onclick function to ALL image tags in my document without having to specify anything in-line. I tried to get an array of every element with the "img" tag and then specify the function to be called onclick for each one, but for some reason showImage is being called once for each image as soon as the page loads and then NOT working on-click. I call the function clickImages() once at the very end of my document, and showImage() never outside of the following code.

Thanks in advance! If addition information is needed, let me know.

function clickImages()
{
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++)
{
   images[i].onclick=showImage(600, 800, images[i].src);
}
}

function showImage(width,height,file)
{ 
document.getElementById("trailimageid").height = height;
document.getElementById("trailimageid").width = width;
document.getElementById("ttimg").src = file; 
}

Oops! Forgot to mention. I have this:

document.write('<div id="trailimageid" style="position:absolute;left:0px;top:0px;width:1px;height:1px;border:1px solid #888888;background:#000000;"><img id="ttimg" src="temp" /></div>');

Basically what I'm doing is opening the image at the top of the page onclick in a new div. This is probably a stupid way of doing it now, but I'll have the new div with the image jump to the position of the mouse and follow it around later.

Answer 1

Try adding your function call like this:

var delegate = function () { showImage(600, 800, this.src) };
images[i].onclick = delegate;

Calling a function with () at any time will execute it. In this way your function will get called later.

Answer 2

I assume that when you click an image you don't want ALL of the images to do something. Just the one you clicked. If thats the case you don't need to loop over all of your imgs. By selecting all the elements with the image tag you've already created a 0 indexed list of objects.

var images = document.getElementsByTagName('img');
images[i].onclick = function() {
    showImage(600, 800, images[i].src);
};

Edit: I'm sorry that was dumb. i is undefined because...well it hasn't been defined. You have to sub i out with an integer. One of the ways you can do this is by wrapping it in a function and passing i as an argument.

var someFunc(i) { // above snippet ... };

Or, as you have, looping over the length of the images list and subbing i out for every one.

for(var i = 0; i < images.length; i++;) {
    // first snippet (define images outside the loop) ...
};

So if you have 3 images, this will exist in your runtime:

images[0].onclick = function() { code };
images[1].onclick = function() { code };
images[2].onclick = function() { code };

It's important to mention that, if you wrap your for loop in a function, your for loop won't run until that function is executed. The clickImage function doesn't seem to get called from what has been provided. You can remove the clickImage function and the code should work as expected.