How can I trigger a function by clicking a div which is hidden in JavaScript?

Question

I have a div in Javascript, which is initially hidden.Now I want this div to show up again when I click on it by guessing its position, since it is not visible to me, but I am unable to trigger the Javascript function that will make it visible again. So what is the alternate way of achieving the same.

Example code is as follows:

<div id="box"style="width:400px; height:300px; background-color:black; visibility:hidden" onclick="show(box)">

And the function is as below:

function show(id) {
document.getElementById(id).style.visibility = "visible";
}

But above doesn't work, please suggest an alternate way.

Answer 1

Instead of setting the display to none or the visibility to hidden, I'd change the opacity instead:

function show(id) {
    document.getElementById(id).style.opacity = 1;
}

<div id="box" style="width:400px; height:300px; background-color:black; opacity:0" onclick="show('box')">

Note also that you need quotes in your event handler (onclick="show('box')"), otherwise the browser assumes that box is a variable.