JavaScript light on and off code

  • Share this:
JavaScript light on and off code

Hello Guys,

Now we make light on and off animation using javascript. It's simple JavaScript and CSS coding. So let's start -

At first download both images which are given in below. You must know that all the files will be in one folder.

 

 

Now create an HTML file and give a name index.html

<html>
<head>
    <title>JavaScript light on and off code</title>
    <style>
        body{
           text-align: center;
           font-family: sans-serif;
          font-size: 3vw;
       }
    </style>
</head>
<body>
    <img id="lighbulb" onclick="changeImage()" src="./pic_bulboff.gif" width="200" height="360">
    <p>Click the light bulb to turn on/off the light.</p>

   <script>
       function changeImage() {
          var image = document.getElementById('lighbulb');
          if (image.src.match("bulbon")) {
              image.src = "pic_bulboff.gif";
          } else {
             image.src = "pic_bulbon.gif";
         }
      }
   </script>
</body>
</html>

You can also use external css or javascript files for coding.

Preview of Coding
JavaScript light on and off code

Click the light bulb to turn on/off the light.

About author
I am a professional web developer. I love programming and coding, and reading books. I am the founder and CEO of StorialTech.