Onclick takes 2 clicks the first time

The first time a div's visibility is changed, it requires 2 clicks.

[Igau]

I think the title is fairly self explanatory, but I'll summarise and quote the code below.

Essentially I have an anchored image that I want users to click to change the visibility of a div. The page loads with the div set to "visibility: hidden;", from an external and linked stylesheet set.

When the page (or any page containing this code) is first opened, two clicks are required to change the div's visibilty instead of just one. After that, toggling the visibility only takes one click.

Everything works perfectly except this one function. All the code I'm using is obtained from tutorials and free javascript sites, as I'm not competent enough to write my own stuff yet.

Here's any relevant source:

function switchvis(id){
 if(document.getElementById(id)) { 
  var ele = document.getElementById(id);
  if(ele.style.visibility=="hidden") { 
   ele.style.visibility="visible";
  } 
  else {
   ele.style.visibility="hidden";
  }
 }
} 

... and the HTML:

<a href="javascript://" onclick="switchvis('remote');"><img src="img/skyremote.gif" height="30" width="112" alt="Remote Control" /></a>

Note: I dont know if the href makes a difference, I set it to "#", removed it altogether and used "javascript://", and they all appeared to have the same effect.

This appears also to be a problem that is not browser-dependant.

[hakre]

hi igau,

first of all, the a nor img has no id. but i think in your code, it has.

then, the visibility style seems to be not initialized on startup. on the first click it will be set to a value and that way initialized, and then working properly.

so if you initialize first, there will be no problem.

[Igau]

Ah thanks, that's got it.

In the code I had <div id="remote">, and an external stylesheet specified it's visibility as "hidden".

Once I'd changed the code to <div id="remote" style="visibility: hidden;">, it worked from the first click. :)