Im trying to run a function inside a function, both of them are triggered onmouseclick.
Problem is that the second function is triggered even though it's not clicked on that element which needs to trigger function2.

Example:

<script type="text/javascript">
function1(itemID) {
     document.getElementById(itemID).style.visibility = "hidden";
     image2 = document.getElementById("image2");
     image2.style.visibility = "visible";
     
     image2.onclick = function2(); <!-- this is the problem -->
}
function2() {
     document.getElementById("image3").style.visibility = "visible";
}
</script>

html:

<img src="#" id="image1" onclick="function1(this.id)"/>
<!-- HIDDEN BY DEFAULT -->
<img src="#" id="image2" />
<img src="#" id="image3" />

When clicked on image1, image2 should appear, and then when clicked on image2, image 3 should appear.

Not exactly what im working on but its gonna do as example.

Any way to solve this?
I know it can be done with separate functions but i need it to be like this.

Right now the script is trying to assign the return value of function2 to image.onclick. Try

image2.onclick = 'function2()';

Yes that was it, it's also working without ()

image2.onclick = function2;

Question, can i pass variable to that function?
I tried with and without quotes but no luck.

Never mind solved it like this:

var func = "function2("+var+")";
image2.onclick = func;

Thanks for your help.

Ahh i still have problem with this.

Only works with opera like this:

image2.onclick = 'function2('+variable+')';

like this, its working with all browsers but it doesn't run onclick, it runs instantly

image2.onclick = function2(variable);

Working ok, but i need to pass that variable.

image2.onclick = function2;

Help?