Control the light switch with js

Use js to control the light switch for your reference. The specific contents are as follows

topic:

Control the light switch through js

analyze:

Get the light bulb element, bind a click event to it, and turn the light bulb on and off by clicking the mouse

Implementation method:

Method 1:

Get the image element and control the light switch by binding the click event to the button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light Switch Case</title>
</head>
<body>
    <img src="./img/关.gif" alt="">
    <button id="open">Turn on the light</button>
    <button id="close">Turn off the light</button>
</body>
<script>
    var open = document.getElementById("open");
    var close = document.getElementById("close");
    var img = document.getElementsByTagName("img")[0];
    open.onclick=function(){
        img.src="./img/开.gif"
    }
    close.onclick=function(){
        img.src="./img/关.gif"
    }
</script>
</html>

Summary: This method is relatively simple and not prone to errors. By binding the button, you can directly obtain the corresponding light switch image.

Running results:

Related methods:

document.getElementById(): Get the corresponding element by id name,
document.getElementsByTagName(): Gets the corresponding element by element name, and the obtained object is an array-like object
onclick: click event, triggered by mouse click

Method 2:

Get the image element and bind the switch event directly to the image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light Switch Case</title>
</head>
<body>
    <img src="./img/关.gif" alt="">
</body>
<script>
    var img = document.getElementsByTagName("img")[0];
    var flag = false;
    img.onclick=function(){
        if(flag){
            img.src="./img/关.gif";
            flag=false;
        }else{
            img.src="./img/开.gif";
            flag=true;
        }
    }
</script>
</html>

Note: This method requires a flag to determine the initial state of the light. When binding a click event directly to the image, be aware that the initial value of the flag is false.

Running result: When you click the light bulb, the light switches between bright and dark.

Related images:

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: