How to turn ON/OFF bulb in HTML & JavaScript

Demo

Introduction

In this blog, we will learn how to turn on or off light bulbs using HTML and javascript. It's very easy to do. In the above demo, you can see what's we are going to do.

Turn on-off bulb

Following are some steps that we need to do, in order to achieve a desire result.

1) Take OFF bulb picture

2) Take ON bulb picture

3) Create Turn ON and Turn OFF buttons

<!DOCTYPE html>
<html>
    <body>
        <head>
            <style>
                button { padding:10px; margin:60px; background-color:orange; }
            </style>
        </head>
        <button>Turn ON</button>
        <button>Turn OF</button>
    </body>
</html>

4) Add logic to buttons

Following function "light" will display turn ON image if value 1 pass to it and dispaly turn OFF picture when value 0 pass to it.

Note: "of.png" is the name of the OFF image picture and same as "on.png".

<script>
function light(value)
	{
	var pic;
		if(value == 0) 
		{
			pic="of.png";
		}
		else
		{
			pic="on.png";
		}
		document.getElementById('bulb').src=pic;
	}
</script>

That's it, with this simple code, we can make turn on and off bulb in HTML and javascript.

Below is the complete code. Enjoy.

<!DOCTYPE html>
<html>
<body>
<head>
<style>
button { padding:10px; margin:60px; background-color:orange; }
</style>
</head>
<script>
function light(value)
	{
	var pic;
		if(value == 0) 
		{
			pic="of.png";
		}
		else
		{
			pic="on.png";
		}
		document.getElementById('bulb').src=pic;
	}
</script>


<img id="bulb" src="of.png">

<br>
<button onclick="light(1)">Turn ON</button>
<button onclick="light(0)">Turn OF</button>
</body>
</html>

Watch and Subscribe on YOUTUBE

CodingWithKhan

Search This Blog

How to make Simple Weather Application in Android Studio

How to make Simple Weather Application in Android Studio (Source code)