show/hide image on click

Question

I need to show/hide image in html page. I thought its very simple. But why I am getting error 'visible' undefined.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ajax Test
    </title>
    <script type="text/javascript">
<!--
    function showImage(){
        document.getElementById('loadingImage').style.visibility=visible;
    }

    -->

    </script>
    </head>
<body>
    <input type="button" value="Ajax Button" onclick="showImage();"/>
    <img id="loadingImage" src="ajax-loader.gif" style="visibility:hidden"/>

</body>

Don't comment out your script: dorward.me.uk/www/comments-cdata — Quentin
– Quentin, Commented Jan 4, 2010 at 11:55

David M · Accepted Answer · 2010-01-04 11:54:07Z

16

You need to put it in quotes - it's a string:

document.getElementById('loadingImage').style.visibility='visible';

answered Jan 4, 2010 at 11:54

David M

73.2k13 gold badges164 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TIMEX · Accepted Answer · 2010-01-04 11:54:46Z

3

I would use Jquery. Go download it at the Jquery home page.

Then, include it:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showImage(){
$("#loadingImage").toggle();
}

</script>


<img id="loadingImage" src="ajax-loader.gif" style="display:none;"/>

answered Jan 4, 2010 at 11:54

TIMEX

275k369 gold badges804 silver badges1.1k bronze badges

Comments

Phil.Wheeler · Accepted Answer · 2010-01-04 11:55:34Z

3

If the other answers don't give you the results you're after, try setting the display to none:

document.getElementById('loadingImage').style.display='none';

answered Jan 4, 2010 at 11:55

Phil.Wheeler

16.9k10 gold badges103 silver badges157 bronze badges

Comments

crazyTechie · Accepted Answer · 2010-01-04 11:56:20Z

1

I am very very sorry. It should be

  document.getElementById('loadingImage').style.visibility='visible';

quuotes missing aroung visible.

answered Jan 4, 2010 at 11:56

crazyTechie

2,54712 gold badges33 silver badges41 bronze badges

Comments

Rich Adams · Accepted Answer · 2010-01-04 11:55:40Z

0

You need to enclose it in quote marks, otherwise JavaScript thinks you're trying to set it to be the value of a variable called "visible". Since you don't have a variable called "visible", you get the error saying that it's undefined.

document.getElementById('loadingImage').style.visibility='visible';

answered Jan 4, 2010 at 11:55

Rich Adams

26.7k4 gold badges43 silver badges62 bronze badges

Comments

h3t1 · Accepted Answer · 2020-09-11 00:00:30Z

0

None of this worked for me. All you have to do is set the image classname to a css property with opacity.

JavaScript:

document.getElementById('loadingImage').className = "opacityofimage";

CSS:

.opacityofimage {
    opacity:0;
}

edited Sep 11, 2020 at 0:00

h3t1

1,2562 gold badges19 silver badges33 bronze badges

answered Sep 10, 2020 at 20:17

Guest

112 bronze badges

Collectives™ on Stack Overflow

show/hide image on click

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related