25/04/2016

Create Javascript Program to Make a Light Bulb Turn on and Off

Create A HTML Page With JavaScript When We Click The Light Bulb To Turn On/Off The Light.
When We Click A Button JavaScript Change The Image So We Think Bulb Is On Again Click The It Again Change The Image So Bulb Look Like It Is off This Is A Trick Behind Bulb On/off

For This Program You Have To Download Both Image Bulb On And Bulb Off

Here Is A Code

bulb.html


<!DOCTYPE html>
<html>
<body align="center" bgcolor="#686899">
<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<h2>Click the light bulb to turn on/off the light.</h2>
<script>

function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}

</script>
</body >
</html>


Output:-
light bulb off javascript

light bulb on javascript

Previous Post
Next Post

post written by:

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me

5 comments:

  1. Thanks Bro Sharing Your Knowledge With us

    ReplyDelete
    Replies
    1. Welcome Reader if any thing you need related to programming plz feel free

      Thanks for visiting

      Delete
  2. Replies
    1. It's 100% Working, Can you please tell me before run this program you download both images Bulb On and Bulb Off. if you Not Please Download first and keep in same folder then Run the Script again.

      Delete
  3. where are the images bro???

    ReplyDelete