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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<body>
    <!-- onclick event is generated
        and it calls turnOnOff function -->
    <!-- OFFbulb.jpg is the turn off bulb image -->
<img id="Image" onclick="turnOnOff()" 
  
    <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://cdncontribute.geeksforgeeks.org/
                     wp-content/uploads/OFFbulb.jpg";
     else
         image.src = "https://cdncontribute.geeksforgeeks.org/
                      wp-content/uploads/ONbulb.jpg";
    }
    </script>
</body>
  
</html>

chevron_right


Output:
Before clicking on the bulb-

After clicking on the bulb-



My Personal Notes arrow_drop_up

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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.