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

The principle and direction of JavaScript this

How to determine what this points to? ①When calle...

MariaDB under Linux starts with the root user (recommended)

Recently, due to the need to test security produc...

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial

This article shares the installation and configur...

WeChat applet development practical skills: data transmission and storage

Combining the various problems I encountered in m...

Docker container orchestration implementation process analysis

In actual development or production environments,...

Implementation code for adding slash to Vue element header

<template> <div class="app-containe...

Solution to the conflict between Linux kernel and SVN versions

Phenomenon The system could compile the Linux sys...

Element-ui's built-in two remote search (fuzzy query) usage explanation

Problem Description There is a type of query call...

Instructions for using the --rm option of docker run

When the Docker container exits, the file system ...

How to add Tomcat Server configuration to Eclipse

1. Window -> preferences to open the eclipse p...

React Principles Explained

Table of contents 1. setState() Description 1.1 U...

How to redirect nginx directory path

If you want the path following the domain name to...