Bulb On / Off using JavaScript

by

Hello friends, in today’s post you will know how to turn the bulb on and off (bulb on and off using js) with JavaScript, so let’s start.

Bulb On / Off using JavaScript

So you will need images of the bulb being on and off
The path of whose image is being given to you below.

https://fullstackgyan.com/wp-content/uploads/2023/11/bulbon.gif

https://fullstackgyan.com/wp-content/uploads/2023/11/bulboff.gif

Now you will need some CSS to center the entire image and change the background color of the body, the CSS code of which is given below.

<style>
	body{
	     background-color: #545fa9;
	    }
	.center_div{
	     text-align: center;
   	     margin-top: 180px;
	    }
</style>

And the code of the body is also being given how to define two buttons to turn the bulb on and off.

<body>
	<div class="center_div">
		<h1 style="color: white;">Bulb Off/On</h1>
	<button onclick="document.getElementById('myImage').src='https://fullstackgyan.com/wp-content/uploads/2023/11/bulbon.gif'">Bulb on</button>
	<img id="myImage" src="https://fullstackgyan.com/wp-content/uploads/2023/11/bulboff.gif" style="width:100px">
	<button onclick="document.getElementById('myImage').src='https://fullstackgyan.com/wp-content/uploads/2023/11/bulboff.gif'">Bulb off</button>
	</div>
</body>

Now you are being given its complete code below which you can use anywhere and its output is also being given.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body{
			background-color: #545fa9;
		}
		.center_div{
			text-align: center;
   			 margin-top: 180px;
		}

	</style>
</head>
<body>
	<div class="center_div">
		<h1 style="color: white;">Bulb Off/On</h1>
	<button onclick="document.getElementById('myImage').src='https://fullstackgyan.com/wp-content/uploads/2023/11/bulbon.gif'">Bulb on</button>
	<img id="myImage" src="https://fullstackgyan.com/wp-content/uploads/2023/11/bulboff.gif" style="width:100px">
	<button onclick="document.getElementById('myImage').src='https://fullstackgyan.com/wp-content/uploads/2023/11/bulboff.gif'">Bulb off</button>
	</div>
</body>
</html>

Now, when you include my code anywhere and run to the this code then Look like this show output

Bulb On / Off using JavaScript

and when you click bulb on then change image and show yellow light bulb .. as feel like that javascript code ..

Bulb On / Off using JavaScript

Request – If you found this post useful(Bulb On / Off using JavaScript) for you, then do not limit it to yourself, do share it.

Leave a Comment