CODEWITHSUNDEEP
javascripthtml
Angus Geraghty
Angus Geraghty

Reputation: 11

How can I make a button that shows a hidden image

I am a beginner and have created a piece of code that displays an image picked from a folder of images. I would like some help creating some code that will: - Hide the image when you first visit the page - Include a button that, when pressed will show the image Any help would be greatly appreciated and I will include my code (so far) below.

<!doctype html>
<html>
<head>
	<style>
	</style>
<meta charset="utf-8">
<title>random image?</title>
</head>

<body>
	<script type = "text/javascript">
	<!--
	document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
	</script>
	
</body>
</html>

Upvotes: 1

Views: 66

Answers (1)

Aaron Plocharczyk
Aaron Plocharczyk

Reputation: 2842

You can initially hide the image with CSS in the style tag:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>random image?</title>
        <style>
            img{
                display:none;
            }
        </style>
        <script>
            function showImage(){
                document.getElementsByTagName("img")[0].style.display = "inline-block";
            }
        </script>
    </head>
    <body>
        <script type = "text/javascript">
            <!--
            document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
        </script>
        <button onclick="showImage();">show</button>
    </body>
</html>

Or by typing it directly in the inline style attribute:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>random image?</title>
        <script>
            function showImage(){
                document.getElementsByTagName("img")[0].style.display = "inline-block";
            }
        </script>
    </head>
    <body>
        <script type = "text/javascript">
            <!--
            document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" style=\"display:none;\"/>");
        </script>
        <button onclick="showImage();">show</button>
    </body>
</html>

Or by calling a JavaScript function when the page loads (at the risk of the image flashing on screen before it's hidden):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>random image?</title>
        <script>
            function hideImage(){
                document.getElementsByTagName("img")[0].style.display = "none";
            }

            function showImage(){
                document.getElementsByTagName("img")[0].style.display = "inline-block";
            }
        </script>
    </head>
    <body onload="hideImage();">
        <script type = "text/javascript">
            <!--
            document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\"/>");
        </script>
        <button onclick="showImage();">show</button>
    </body>
</html>

If I were to do this myself, I'd do it like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>random image?</title>
        <script src="https://randojs.com/1.0.0.js"></script>
        <style>
            #myImage{
                display:none;
            }
        </style>
        <script>
            function showImage(){
                var image = document.getElementById("myImage");
                if(image.style.display != "inline-block"){
                    image.src = rando(1, 42) + ".jpg";
                    image.style.display = "inline-block";
                }
            }
        </script>
    </head>
    <body>
        <img src="" alt="Random image" id="myImage"/>
        <button onclick="showImage();">show</button>
    </body>
</html>

The "rando" function is sourced from a tool called rando.js that I use to simplify randomness in javascript and make it more readable. It's not a native JavaScript function, so I source it in with this line:

<script src="https://randojs.com/1.0.0.js"></script>

Everyone has their own style. Pick the technique that works best for you.

Upvotes: 1

Related Questions