JavaScript to show and hide images

JavaScript to show and hide images

JavaScript shows and hides pictures, for your reference, the specific content is as follows

Click the button to show and hide the image (displayed by default). Attach the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show and hide images</title>
</head>
<body>
    <button id="btn">Hide</button>
    <br>
    <img src="img/image01.jfif" id="newGirlFriend">
    <script type="text/javascript">
        // 1. Get the event source var obtn = document.getElementById("btn");
        var newImg = document.getElementsByTagName("img")[0];
        // var isShow = true; // Method 2

        // 2. Binding event obtn.onclick = function (){
            // if (isShow) { // Method 2
            if (obtn.innerHTML === 'Hide') {
                // 3. Event driver newImg.style.display = 'none';
                obtn.innerHTML = "display"; //
                // isShow = false; // Method 2
            }else {
                newImg.style.display = 'block';
                obtn.innerHTML = "Hide";
                // isShow = true; // Method 2
            }
        }

    </script>
</body>
</html>

There are two implementation methods, the implementation is as follows:

This is the default display interface. After clicking hide, it will look like this:

The simple function of showing and hiding pictures is now realized!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Native JS realizes hiding and displaying pictures JS realizes clicking and switching pictures
  • How to use JavaScript to hide and display images at a fixed time
  • js calls the picture hiding & display implementation code

<<:  Detailed steps to install MySql 5.7.21 in Linux

>>:  How to install iso file in Linux system

Recommend

Docker installation tomcat dubbo-admin instance skills

1. Download the tomcat image docker pull tomcat:8...

Basic reference types of JavaScript advanced programming

Table of contents 1. Date 2. RegExp 3. Original p...

MySQL 5.7.25 installation and configuration method graphic tutorial

There are two types of MySQL installation files, ...

jQuery canvas draws picture verification code example

This article example shares the specific code of ...

Quickly solve the problem of slow Tomcat startup, super simple

Today I helped a classmate solve a problem - Tomc...

A brief discussion on spaces and blank lines in HTML code

All consecutive spaces or blank lines (newlines) ...

Summary of scientific principles and suggestions for web design and production

<br />In the field of network design, resear...

26 Commonly Forgotten CSS Tips

This is a collection of commonly used but easily ...

JavaScript clicks the button to generate a 4-digit random verification code

This article example shares the specific code of ...

MYSQL A question about using character functions to filter data

Problem description: structure: test has two fiel...

How to Find the Execution Time of a Command or Process in Linux

On Unix-like systems, you may know when a command...

Briefly describe the four transaction isolation levels of MySql

Isolation Level: Isolation is more complicated th...

How to use Nginx to handle cross-domain Vue development environment

1. Demand The local test domain name is the same ...

MySQL 8.0.25 installation and configuration method graphic tutorial

The latest download and installation tutorial of ...

getdata table table data join mysql method

public function json_product_list($where, $order)...