Source code For Example :
<!DOCTYPE html>
<html>
<body>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p id="demo"></p>
<p id="position"></p>
<p id="conditionCheck"></p>
<script>
function changeImage()
{
var image = document.getElementById('myImage');
if (image.src.match("bulbon"))
{ document.getElementById("conditionCheck").innerHTML=Boolean(image.src.match("bulbon"));
image.src = "pic_bulboff.gif";
text="i am in offfffffffff";
document.getElementById("position").innerHTML=text;
}
else
{
document.getElementById("conditionCheck").innerHTML=Boolean(image.src.m atch("bulbon"));
image.src = "pic_bulbon.gif";
text="i am in on";
document.getElementById("position").innerHTML=text;
}
var k=document.getElementById('myImage').src;
document.getElementById("demo").innerHTML=k;
}
</script>
</body>
</html>
Courtesy : w3schools.com
Java Script flow steps explanation:-
1. By default Intitally control goes to else condition because (<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">) in this image src contains bulboff url,so if condition fails ,directly control goes to else part ,in that else part we assign image.src="onbulb url"; so in image.src currently having bulb on image url, so initially bulb is in off mode.,idea behind that is what action to be taken when user clicks on ...
2.Then next when you click on bulb image it will on ,because if condition executes .Initially we assign image src="bulbon".So if condition ,in if condition ,we assign again image src="bulboff" ,idea behind that is what action to be taken when user clicks off ...
3. It will repeat until you stop to click...
No comments:
Post a Comment