Why do I have to click twice for the button to work and how can I fix this?

Question

The function performs perfectly except only after I've clicked the button two times in a row.

 function hideable(id) { var e = document.getElementById(id); if (e.style.display == 'inline-block') e.style.display = 'none'; else e.style.display = 'inline-block'; } 

 <img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000"> <span id="hide_image" onclick="hideable('0000000000');">hide image</span> 

Edit: Sorry, I should've specified. Here's the CSS I'm already using but it still doesn't work (even with inline-block)

img.user_upload {
height: 75px; display: inline-block; float: left;
margin: 0px 20px 10px 0px;}

Answer 1

As you tagged this question jQuery you can do the same thing a lot simpler in jQuery:

$('#hide_image').click(function() {
    $(this).prev('img').toggle();
});

onclick attributes can be maintenance nightmare. Nicer to connect the event in the same place you handle it.

toggle takes care of the visibility checking so you do not run into these problems.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ztgLom3p/

To work on multiple buttons, use a class instead of an ID on the spans:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ztgLom3p/1/

$('.hide_image').click(function() {
    $(this).prev('img').toggle();
});

jQuery really is the way to go if you have it in the page already. The code is typically much shorter, easier to read and maintain than the equivalent raw JavaScript.

Answer 2

Because you haven't set your image's display to inline block..

<img class="user_upload" src="http://placehold.it/350x150" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000" style="display:inline-block">

that fixes the issue

See the DEMO here

Answer 3

Because your
<img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309"title="1024 KB, 500x309" id="0000000000">
Does not already contain a display style, its returning null in your if statement and is triggering your else case.

try:

<img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000" style="display:inline-block"> 

Now when you run it, it will identify that there is an element and will set the style to none.

Answer 4

It looks like your image does not have a display of "inline-block" on page load. Add something like this to your css file:

img.user_upload { display: inline-block;}

Answer 5

UPDATE: seems like images don't even have a standard display property. at least you can't read them with e.style.display .
at the beginning the display property is not set, so you have to change your conditions:

function hideable(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'inline-block' || e.style.display == '')
      e.style.display = 'none';
   else if(e.style.display == 'none')
      e.style.display = 'inline-block';   
}

JSFiddle: http://jsfiddle.net/v4sc6mtb/1/

standard display property of images is inline - this should work for both cases: