Turn on or off bulb using JavaScript

Write a JavaScript code that turns ON and OFF the Light Bulb.
Syntax:

img src = URl
     or
img src = image_name.jpg

Here the src property sets or returns the value of the src attribute of an image. The required src attribute specifies the URL of an image.
There are two states of the bulb is used which are specified below-
Initial state of bulb (OFF STATE):

After clicking on bulb (ON STATE):

JavaScript code to illustrate this topic:

<html> 
  
<body> 
    <!-- onclick event is generated 
        and it calls turnOnOff function --> 
    <!-- OFFbulb.jpg is the turn off bulb image --> 
<img id="Image" onclick="turnOnOff()" 
src="https://media.geeksforgeeks.org/wp-content/uploads/OFFbulb.jpg"> 
  
    <p>Click on the bulb to turn it ON and OFF</p> 
  
    <script> 
     // implementation of turnOnOff function --> 
     function turnOnOff()  
     // taking image in image variable 
     var image = document.getElementById('Image'); 
  
     //Match the image name 
     //whether it is ONbulb or OFFbulb 
     //change image to OFFbulb.jpg if 
     //it match with ONbulb otherwise 
     //change it to ONbulb.jpg --> 
     if (image.src.match("ONbulb")) 
         image.src = "https://media.geeksforgeeks.org/ 
                     wp-content/uploads/OFFbulb.jpg"; 
     else
         image.src = "https://media.geeksforgeeks.org/ 
                      wp-content/uploads/ONbulb.jpg"; 
    } 
    </script> 
</body> 
  
</html> 

Output:
Before clicking on the bulb-

After clicking on the bulb-

My Personal Notes

Recommended Posts:

Naman_Garg

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.