using javascript to make a light switch

Question

I want to using javascript to make a light switch.
When the background color is:
"white" => turn on
"black" => turn off

Question: My code can turn off the light, but I don't know how to turn it on.

I have a idea to the last, but it dosen't work. How to fix it?

Here is my code.
HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
    <mate charset="utf-8" />
    <title>light Switch</title>
    <link rel="stylesheet" href="lightSwitch.css" />
</head>

<body>
<!--
    <a href="javascript:void(0)" id="lightOn">turn on</a>
</br>
    <a href="javascript:void(0)" id="lightOff">turn off</a>
</br>
-->
    <a href="javascript:void(0)" id="lightSwitch">The switch</a>

    <script src="lightSwitch.js"></script>
</body>
</html>

CSS

body{
    background-color: white;
    margin: 0;
    padding: 0;
}

#lightSwitch{
    width: 300px;
    height: 25px;
    text-align: center;
    border: 1px solid black;
    padding: 5px;
    text-decoration: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -152.5px;
}

javascript

function lightSwitch(){
    var light = document.getElementById("lightSwitch");
    var BGcolor = document.body.style.backgroundColor;
    if (BGcolor != "black"){
        light.innerHTML = "The light is open! Click here to close.";
        light.onclick = function(){
            document.body.style.backgroundColor = "Black";
            light.innerHTML = "The light is close! Click here to open.";
        }
    }
}
lightSwitch();

I have a idea, look:

function lightSwitch(){
    var light = document.getElementById("lightSwitch");
    var BGcolor = document.body.style.backgroundColor;
    if (BGcolor != "black"){
        light.innerHTML = "The light is open! Click here to close.";
        light.onclick = function(){
            document.body.style.backgroundColor = "Black";
            light.innerHTML = "The light is close! Click here to open.";
        }else{
            light.onclick = function(){
                document.body.style.backgroundColor = "white";
            }
        }
    }
}
lightSwitch();

Do you want to use plain javascript? If not, look at toggleClass in jQuery it'll do the trick. — johanthuresson, Mar 02 '15 at 13:15
I would suggest to toggle a `class` on the body element instead of a `style` property. A class is more flexible (you can change more than one attribute) and the naming is up to you (no problems with `Black` vs `black` vs `#000` etc.) — Sirko, Mar 02 '15 at 13:18

Mario · Answer 1 · 2015-03-02T14:13:41.510

0

Your code is way too complicated. Define a CSS class and assign the class as required.

I created a demo (at Codepen) to demonstrate my thoughts. Hope this helps.

The JavaScript part as preview:

document.getElementById('switch').addEventListener('click', function() {
  if (this.classList.contains('off')) {
    // switch on
    this.classList.remove('off');
  } else {
    // switch off
    this.classList.add('off');
  }
});

By toggling the class you can achieve a lot more than just changing one property, as shown in the demo.

edited Mar 02 '15 at 14:13

answered Mar 02 '15 at 13:18

Mario

8,253
2
14
29

Thanks for your suggestion, but I have no idea to use CSS class. – user3275827 Mar 02 '15 at 13:40

score 0 · Accepted Answer · answered Mar 02 '15 at 13:29

0

I simplified the code. DEMO

HTML:

<div id="container"></div><button id="lightSwitch">Switch</button>

JS:

var swit = document.getElementById('lightSwitch');
var container = document.getElementById('container');
swit.onclick = function(){
    var color = container.style.backgroundColor;
        if(color === 'white'){
            container.style.backgroundColor = 'black';
        }else{
            container.style.backgroundColor = 'white';
        }
};

answered Mar 02 '15 at 13:29

kemicofa ghost

16,349
8
82
131

Thank you. Your demo is work. And do you have another way to finish this function? Such as define a CSS class? – user3275827 Mar 02 '15 at 13:51
What do you mean by finish this function? – kemicofa ghost Mar 02 '15 at 14:11
Sorry, my English is not very well. I mean can you use CSS to achieve "light switch"? – user3275827 Mar 02 '15 at 15:34
It doesn't look like you can do it with CSS alone. There is the selector :active that on 'click' will do what you want.. but once the click is finished it will revert to whatever it was before the click. I found a post that mixes more css than js and uses the :active. http://stackoverflow.com/questions/7738219/how-to-keep-active-css-style-after-clicking-an-element (but they use jquery in this post ). – kemicofa ghost Mar 02 '15 at 15:54

using javascript to make a light switch

2 Answers2

HTML:

JS: