Using js to implement simple switch light code

Using js to implement simple switch light code

Body part:

<button>Turn on/off light</button>

Script part:

    <script>

        // window.onload is the window loading event, which can be used to write code to the element window.addEventListener('load', function () {

            var btn = document.querySelector('button');

            // Define a variable to determine whether the light is on or off var flag = 0;

            btn.onclick = function () {

                if (flag == 0) {

                    document.body.style.backgroundColor = 'black';

                    flag = 1;

                } else {

                    document.body.style.backgroundColor = 'pink';

                    flag = 0;

                }

            }

        })

    </script>

If script is written directly below button ,

Then use the following code:

<script>

        var btn = document.querySelector('button');

        var flag = 0;

        btn.onclick = function () {

            if (flag == 0) {

                document.body.style.backgroundColor = 'black';

                flag = 1;

            } else {

                document.body.style.backgroundColor = 'pink';

                flag = 0;

            }

        }

    </script>
 

This is the end of this article about using js to implement simple light switch code. For more relevant js to implement simple light switch content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • js to achieve the effect of switching lights
  • Example of switching light bulb click toggle special effects implemented by JavaScript
  • JS/jQuery to achieve a simple switch light effect [Case]

<<:  Explain the deployment and configuration of Clickhouse Docker cluster with examples

>>:  Summary of a CSS code that makes the entire site gray

Recommend

JavaScript to achieve digital clock effects

This article example shares the specific code for...

JavaScript custom calendar effect

This article shares the specific code of JavaScri...

How does the composite index of MySQL take effect?

Table of contents background Understanding compos...

How to transfer files between Docker container and local machine

To transfer files between the host and the contai...

Docker deploys Macvlan to achieve cross-host network communication

Basic concepts: Macvlan working principle: Macvla...

How to use Docker to build OpenLDAP+phpLDAPadmin unified user authentication

1. Background Use LDAP to centrally manage operat...

htm beginner notes (must read for beginners)

1. What is HTML HTML (HyperText Markup Language):...

JS implements click drop effect

js realizes the special effect of clicking and dr...

Vue.js cloud storage realizes image upload function

Preface Tip: The following is the main content of...

Detailed analysis of each stage of nginx's http request processing

When writing the HTTP module of nginx, it is nece...

Differences between proxy_pass in two modules in nginx

1. The proxy_pass directive of the 1.ngx_stream_p...

Vue implements the countdown component for second kills

This article shares the specific code of Vue to i...

RHEL7.5 mysql 8.0.11 installation tutorial

This article records the installation tutorial of...

Example of using CASE WHEN in MySQL sorting

Preface In a previous project, the CASE WHEN sort...