Button needs double-click to show an image?

Question

The button in this script is supposed to be able to make an image appear and disappear. The code works fine, after the first time the image appears. I want the image to be hidden at first, and when the button is clicked, I want it to make it visible, but the button needs to be double-clicked at first, and then it properly works. It is annoying, how can I fix it?
Code:
(It's simple I know, I started out yesterday)

<!DOCTYPE html>
     <html>
    <meta charset= "utf-8">
    <head>
    
    <title>cat</title>
    
    <style>
    
    #flyingcat {
    visibility: hidden; 
    }
    
    </style>
    
    </head>
    
    <body> 
    
    <button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
    
    <div id="flyingcat">
    <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
     <p>hey</p>
    </div>
    
    </body>
    
    <script>
    
    function show() {
        var x = document.getElementById("flyingcat");
        if (x.style.visibility === "hidden") {
            x.style.visibility = "visible";
        } else {
            x.style.visibility = "hidden";
        }
    }
    
    </script>
    
    </html>

`x.style.visibility` returns the value as defined in the `style` attribute of `x`. As there is none, the first time you click the button `x.style.visibility === "hidden"` is `false` — Andreas, May 05 '18 at 05:43

WPDev · Answer 1 · 2018-05-05T06:04:27.957

try this:

This is if you started the image hidden.

They way you are coding right now, you are assuming the initial state of image is visible.

Because when first time JavaScript reads image's visibility state its null;

The reason is as in this stack post:

Reverse your if and else tests. JavaScript can't read CSS properties from style unless it explicitly sets them

    function show() {
        var x = document.getElementById("flyingcat");
        if (x.style.visibility == "visible") {
            x.style.visibility = "hidden";
        } else {
            x.style.visibility = "visible";
        }
    }

#flyingcat {
visibility: hidden; 
}

<button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>

<div id="flyingcat">
<img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
 <p>hey</p>
</div>

score 1 · Answer 2 · answered May 05 '18 at 05:58

If you access to a DOM Element via JS(using for example getElementById) you'll not be able to read the computed style of that element, because it is defined inside the CSS file. To avoid this, you have to use property getComputedStyle(or currentStyle for IE).

Please check this answer out

31piy · Answer 3 · 2018-05-05T06:07:12.890

Styles set using CSS are not visible in JavaScript. You need to assign the style by JS at first, and then call your function to toggle the visibility.

Here is a working demo:

var style = document.getElementById("flyingcat").style;
style.visibility = 'hidden';

function show() {
  style.visibility = style.visibility === 'hidden' ? 'visible' : 'hidden';
}

<button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>

<div id="flyingcat">
  <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
  <p>hey</p>
</div>

An alternative way is to use getComputedStyle() and then get the property's value using getPropertyValue(). This way, your code doesn't need to change much.

function show() {
  var x = document.getElementById("flyingcat");
  var styles = getComputedStyle(x, null);
  
  if (styles.getPropertyValue('visibility') === "hidden") {
    x.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
  }
}

#flyingcat {
  visibility: hidden;
}

<button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>

<div id="flyingcat">
  <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
  <p>hey</p>
</div>

score 0 · Answer 4 · answered May 05 '18 at 05:47

To make the image hidden by default, and toggle hidden/show on button being double-clicked, use following code in script tags.

<script>
document.getElementById("flyingcat").style.visibility = 'hidden';
function show() {
    var x = document.getElementById("flyingcat");
    if (x.style.visibility === "hidden") {
        x.style.visibility = "visible";
    } else {
        x.style.visibility = "hidden";
    }
}

</script>

And also run show() function on double-click event of button by changing

<button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>

to

<button ondblclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>

score 0 · Answer 5 · answered May 05 '18 at 05:47

The visibility property set by empty string, you can write it inline it'll work correctly!

<!DOCTYPE html>
     <html>
    <meta charset= "utf-8">
    <head>
    
    <title>cat</title>
    
    </head>
    
    <body> 
    
    <button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
    
    <div id="flyingcat" style="visibility: hidden;">
    <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
     <p>hey</p>
    </div>
    
    
    <script>
    
    function show() {
        var x = document.getElementById("flyingcat");
        if (x.style.visibility === "hidden") {
            x.style.visibility = "visible";
        } else {
            x.style.visibility = "hidden";
        }
    }
    
    </script>
    </body>
    
    
    </html>

Matthew Ciaramitaro · Answer 6 · 2018-05-05T06:14:49.290

x.style.visibility is the empty string by default. I switched the order of your if statement to show the image onclick unless it is currently shown.

<!DOCTYPE html>
     <html>
    <meta charset= "utf-8">
    <head>
    
    <title>cat</title>
    
    <style>
    
    #flyingcat {
    visibility: hidden; 
    }
    
    </style>
    
    </head>
    
    <body> 
    
    <button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
    
    <div id="flyingcat">
    <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
     <p>hey</p>
    </div>
    
    </body>
    
    <script>
    
    function show() {
        var x = document.getElementById("flyingcat");
        console.log([x.style.visibility])
        if (x.style.visibility === "visible") {
            x.style.visibility = "hidden";
        } else {
            x.style.visibility = "visible";
        }
    }
    
    </script>
    
    </html>

Immad Hamid · Answer 7 · 2018-05-05T06:21:52.493

You can just add an event listener on your image container. No need to add a css and no need pass function from your div. In your script tag this is what you can do... This way your JavaScript drives the template and not a mixture of things.

// for getting the button
let button = document.querySelector('button');
// hiding the image div at first
document.getElementById('flyingcat').style.display = 'none';

// event listner on click
button.addEventListener('click', () => {
  // getting the image
  const image = document.getElementById('flyingcat');

  // toggle image display
  if (image.style.display === 'none') { // if the diplay is none
    image.style.display = 'block';      // making the image block
  } else image.style.display = 'none';  // else hiding the image again

});

I have commented the lines so that you know what's being done at what point...

I see you have used visibility: hidden. Let me tell you that by using this the element would be there but it's visibility would be none, meaning that it will cover the space always. But by using display:none property we can remove the entire element from the screen.

Button needs double-click to show an image?

7 Answers7