Turn on or off bulb using JavaScript

0 0 Less than a minute

Write a JavaScript code that turns the ON and OFF Light Bulb. We will define a function turnOnOff() that will change the bulb from ON to OFF and vice versa

Syntax:

<img src = "URl" onClick=turnOnOff()>

Example: In this example, we will write a code that changes the state of bulb from ON to OFF and vice-versa by clicking on the image of bulb.

HTML

<script>
    function turnOnOff() {
        var image=document.getElementById('Image');
        if(image.src.match("ONbulb"))
            image.src=
"https://media.zambiatek.com/wp-content/uploads/OFFbulb.jpg";
        else
            image.src=
"https://media.zambiatek.com/wp-content/uploads/ONbulb.jpg";
    }
</script>
 
    <img id="Image"
          onclick="turnOnOff()"
          src=
"https://media.zambiatek.com/wp-content/uploads/OFFbulb.jpg">
 
<p>
    Click on the bulb to turn it ON and OFF
</p>