How to display an image only if a JS variable is true?

Question

Just started learning HTML, and I came across a simple problem which I couldn't find the answer to. I know that I can use the line <img src ="link to src"/> to display an image. I also know I can used the <script> </script> tags to hold javascript code. My question is, how can I only display the img if a variable in my script is equal to true?

<!DOCTYPE html>
<HTML>
    <TITLE>Img Tester</TITLE>
    <BODY> 
       <h1>Image:</h1>
       <img src ="link to src"/>  <!--only display this if the variable c == true in the script--> 

    </BODY>
    <SCRIPT>
        var c = confirm("Display Image?");
            if(c== true) {
               //do something here that displays image? 
            }
    </SCRIPT>
</HTML>

http://stackoverflow.com/questions/6242976/javascript-hide-show-element might help — seenukarthi, Feb 24 '16 at 05:07

score 4 · Accepted Answer · edited Feb 24 '16 at 05:46

4

First, I'd set the default style of the image with id="img1" to hidden. Both display: none and visibility: hidden are similar however visibility takes up space.

Please take a look at the snippet below. If you press ok, you will see the image of the dragon. If you press cancel, it won't appear.

var image = document.getElementById("img1");
var c = confirm("Display Image?");
if (c) {
  image.style.display = 'block';
}

#img1 {
  display: none;
  height: 200px;
  width: 200px;
}

<h1>Image:</h1>
<img id="img1" src="http://cdn.playbuzz.com/cdn/df02649d-894e-4b82-94da-cd10dd2449a0/7833c7a7-6301-446b-8fbc-ed948aaaa0be.jpg"/>

A few pointers

Tag names should be in lowercase, not uppercase
Instead of if(c == true), use the equivalent if (c)

edited Feb 24 '16 at 05:46

Em Seven

155
1
1
10

answered Feb 24 '16 at 05:09

Richard Hamilton

25,478
10
60
87

Great thanks. This and @gurvinder372 both seem like good ways. Unfourtunetly I can only accept one and he was about 30 seconds before you. However, I did +1 you. – Ashwin Gupta Feb 24 '16 at 05:11
That's understandable. I will edit this answer to improve it though for future readers – Richard Hamilton Feb 24 '16 at 05:12
@AshwinGupta actually Richard's solution is better. Only change I would make is using display:none rather than visibility – gurvinder372 Feb 24 '16 at 05:12
@gurvinder372 oh okay. Well then I guess I'll accept his. Thank you for your honesty! I still +1 you though for the quick/valid response. Also, can I do this: `` ? – Ashwin Gupta Feb 24 '16 at 05:14
`display:none` ? In my applications, I usually always use `visibility:hidden`. Should I change it to `display:none`? – Richard Hamilton Feb 24 '16 at 05:14
1

@AshwinGupta `` – gurvinder372 Feb 24 '16 at 05:14
@RichardHamilton thanks for the pointers too. As for 1, I'll keep note of that. 2, I just wanted to be safe since I didn't know if JS had that shorthand, normally I'd do that. – Ashwin Gupta Feb 24 '16 at 05:15
Yes, change it to `display:none` since then it won't take any space. `Visibility:visible` takes space and then hide the same but still keeps the space. – gurvinder372 Feb 24 '16 at 05:15
Alright got it working! @gurvinder372 thanks for your help also. – Ashwin Gupta Feb 24 '16 at 05:21

gurvinder372 · Answer 2 · 2016-02-24T05:13:37.620

Give an id to that image and hide the element with that id

<!DOCTYPE html>
<HTML>
    <TITLE>Img Tester</TITLE>

    <BODY> 
       <h1>Image:</h1>
       <img  style="display:none" id="img1" src ="link to src"/>  <!--only display this if the variable c == true in the script--> 

    </BODY>
    <SCRIPT>
        var c = confirm("Display Image?");
            if(c== true) {
               document.getElementById( "img1" ).style.display = "inline"; 
            }
    </SCRIPT>
</HTML>

Observe two changes in the code

Id attribute has been given to the image element and its display property is set to none
In the if section, a line has been added to hide the image using that id

document.getElementById( "img1" ).style.display = "inline";

by setting its display property to 'inline'.

Thank you. Will accept this one. Didn't realize that there were "fields" to html tags. — Ashwin Gupta, Feb 24 '16 at 05:12

score 0 · Answer 3 · edited Feb 24 '16 at 05:37

0

Use this code

<HTML>
    <TITLE>Img Tester</TITLE>
    <BODY> 
       <h1>Image:</h1>
       <img id="img"/>
    </BODY>
    <SCRIPT>
        var c = confirm("Display Image?");
            if(c== true) {
               document.getElementById("img").setAttribute("src","1.jpg"); 
            }
    </SCRIPT>
</HTML>

edited Feb 24 '16 at 05:37

Ashwin Gupta

2,159
9
30
60

answered Feb 24 '16 at 05:16

Senthilkumar S

1
1
2

Thanks for the response, doesn't seem like this has anything the other two didn't however. – Ashwin Gupta Feb 24 '16 at 05:17

score 0 · Answer 4 · answered Feb 24 '16 at 05:17

Use div for this as following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>

<div id = "display">
    <h1>Image:</h1>
    <img src ="link to src"/>
</div>

<script>
    document.getElementById('display').style.visibility = 'hidden';
    var c = confirm("Display Image?");
    if(c== true) {
       //do something here that displays image? 
       document.getElementById('display').style.visibility = 'visible';
    }
</script>

</body>
</html>

Alexander Bychkov · Answer 5 · 2016-02-25T08:21:52.957

I'd use classes for this task...

<img id="image-1" class="myimage" />

In your styles you should hide the image

.myimage {
    display: none;
}

Also you need another class to show your image

.myimage-show {
    display: block;
}

Now you need set myimage-show class to show your image

 <script>
    var c = confirm("Display Image?");
    if(c== true) {
       document.getElementById('image-1').classList.add('myimage-show'); 
    }
 </script>

score 0 · Answer 6 · answered Feb 24 '16 at 05:19

0

display: none will download the image even if the user clicks cancel. Here's another approach to download the image ONLY if the user clicks OK

<h1>Image:</h1>
<div id="myImg"></div>

</BODY>
<SCRIPT>
    var c = confirm("Display Image?");
    if(c== true) {
        document.getElementById("myImg").innerHTML='<img src="img_src" />';
    }
</SCRIPT>

You can replace the div with p or whatever you like.

answered Feb 24 '16 at 05:19

Em Seven

155
1
1
10

Interesting approach. I will look into this. – Ashwin Gupta Feb 24 '16 at 05:22

How to display an image only if a JS variable is true?

6 Answers6