Bulb On/Off Effect using JavaScript

In this tutorial, we will be using JavaScript to create a bulb on/off effect in a webpage. The following source code uses two identical bulb images one in on state while the other in off state.

You can use the following images for the bulb :

Full Source Code :

<!DOCTYPE html>
<html>
  <head>
    <style>
      body{
        background:#000;
      }
      .bulb-wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .switch{
        right: 10px;
        cursor: pointer;
          position: absolute;
          -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
          -khtml-user-select: none; /* Konqueror HTML */
          -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; 
      }
      .onoff-on {
          background-color: #00a65a!important;
          border-color: #008d4c;
          color: #fff;
          padding: 5px 5px;
          text-align: left;
          border-radius: 5px;
          border-right: 70px solid #ddd;
          width: 70px;
          -webkit-box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
          -moz-box-shadow: inset 0 3px 5px rgba(99,0,0,.125);
          box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
          text-align: center;
          cursor: pointer;
      }
      .onoff-off {
          background-color: #f56954!important;
          border-color: #f4543c;
          color: #fff;
          padding: 5px 5px;
          text-align: right;
          border-radius: 5px;
          border-left: 70px solid #ddd;
          width: 70px;
          text-align: center;
          -webkit-box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
          -moz-box-shadow: inset 0 3px 5px rgba(99,0,0,.125);
          box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
      }
      #on,#off{
        width: 38%;
      }
    </style>
  </head>

  <body>

  <div id="switch" class="switch onoff onoff-off">Off</div>
  <div class="bulb-wrapper">
    <img id="off" src="off.png">
    <img id="on" style="display:none;" src="on.png">
  </div>

  <script>
    var bulb_on = document.getElementById('on');
    var bulb_off = document.getElementById('off');
    var switch_btn = document.getElementById('switch');
    
    function toggleOnOff(){
      if (window.getComputedStyle(bulb_on).display === "none") {
        bulb_on.style.display = 'block';
        bulb_off.style.display = 'none';
        switch_btn.innerHTML = 'On';
      }else{
        bulb_on.style.display = 'none';
        bulb_off.style.display = 'block';
        switch_btn.innerHTML = 'Off';
      }
      toggleSwitch();
    }

    function toggleSwitch(){
      switch_btn.classList.toggle("onoff-on");
      switch_btn.classList.toggle("onoff-off");
    }
    switch_btn.addEventListener('click',function(){
      toggleOnOff();
    });
  </script>
  
  </body>
</html>

 

Follow this video for complete guidance :