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

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>

<!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>

Share asked Feb 24, 2016 at 5:06 Ashwin Gupta 2,2079 gold badges36 silver badges61 bronze badges

stackoverflow./questions/6242976/… might help – seenukarthi Commented Feb 24, 2016 at 5:07

Add a ment |

6 Answers 6

Sorted by: Reset to default 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./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)

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'.

Use div for this as following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/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>

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.

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>

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to display an image only if a JS variable is true? - Stack Overflow

6 Answers 6