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

CSS performance optimization - detailed explanation of will-change usage

will-change tells the browser what changes will h...

Complete step record of vue encapsulation TabBar component

Table of contents Implementation ideas: Step 1: C...

Using MySQL database with Python 3.4 under Windows 7

The detailed process of using MySQL database with...

Ubuntu Server 16.04 MySQL 8.0 installation and configuration graphic tutorial

Ubuntu Server 16.04 MySQL 8.0 installation and co...

Linux CentOS MySQL database installation and configuration tutorial

Notes on installing MySQL database, share with ev...

Ubuntu 16.04 installation tutorial under VMware 12

This article shares with you the installation tut...

JS realizes the effect of picture waterfall flow

This article shares the specific code of JS to re...

Share 20 excellent web form design cases

Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...

Example of how to implement underline effects using Css and JS

This article mainly describes two kinds of underl...

How to change the tomcat port number in Linux

I have several tomcats here. If I use them at the...

Detailed explanation of the difference between tinyint and int in MySQL

Question: What is the difference between int(1) a...

How to deploy nginx with Docker and modify the configuration file

Deploy nginx with docker, it's so simple Just...

Native js drag and drop function to create a slider example code

Drag and drop is a common function in the front e...