Tutorial 01
<html>
<head>
<title>Click on two buttons</title>
<script type="text/javascript">
var counter = 0;
function doFunction (option)
{
var msg = "";
document.getElementById('result'+counter).style.display = "none";
if (counter == 0)
{
if ( option == 'button1')
{
counter = 1;
msg = "Number of clicks = 1 (clicked on button 1)";
}
else if (option == 'button2' )
{
counter = 1;
msg = "Number of clicks = 1 (clicked on button 2)";
}
}
else if (counter == 1)
{
if ( option == 'button1')
{
counter = 2;
msg = "Number of clicks = 2 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1)";
}
else if (option == 'button2' )
{
counter = 3;
msg = "Number of clicks = 2 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2)";
}
}
else if (counter == 2)
{
if ( option == 'button1')
{
counter = 4;
msg = "Number of clicks = 3 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1 and 3rd time clicked on button 1)";
}
else if (option == 'button2' )
{
counter = 5;
msg = "Number of clicks = 3 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1 and 3rd time clicked on button 2)";
}
}
else if (counter == 3)
{
if ( option == 'button1')
{
counter = 6;
msg = "Number of clicks = 3 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2 and 3rd time clicked on button 1)";
}
else if (option == 'button2' )
{
counter = 7;
msg = "Number of clicks = 3 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2 and 3rd time clicked on button 2)";
}
}
else if (counter == 4)
{
if ( option == 'button1')
{
counter = 8;
msg = "Number of clicks = 4 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1 and 3rd time clicked on button 1 and 4th time on button 1)";
}
else if (option == 'button2' )
{
counter = 9;
msg = "Number of clicks = 4 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1 and 3rd time clicked on button 1 and 4th time on button 2)";
}
}
else if (counter == 5)
{
if ( option == 'button1')
{
counter = 8;
msg = "Number of clicks = 4 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1 and 3rd time clicked on button 2 and 4th time on button1)";
}
else if (option == 'button2' )
{
counter = 9;
msg = "Number of clicks = 4 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1 and 3rd time clicked on button 2 and 4th time on button2)";
}
}
else if (counter == 6)
{
if ( option == 'button1')
{
counter = 8;
msg = "Number of clicks = 4 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2 and 3rd time clicked on button 1 and 4th time on button1)";
}
else if (option == 'button2' )
{
counter = 9;
msg = "Number of clicks = 4 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2 and 3rd time clicked on button 1 and 4th time on button2)";
}
}
else if (counter == 7)
{
if ( option == 'button1')
{
counter = 8;
msg = "Number of clicks = 4 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2 and 3rd time clicked on button 2 and 4th time on button1)";
}
else if (option == 'button2' )
{
counter = 9;
msg = "Number of clicks = 4 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2 and 3rd time clicked on button 2 and 4th time on button2)";
}
}
document.getElementById('result'+counter).style.display = "block";
alert(msg);
}
</script>
</head>
<body>
<div style="margin-top:100px; text-align:center">
<div id="result0" style="display:block">
Start By Clicking On A Button
</div>
<div id="result1" style="display:none">
Number of clicks = 1 (1st time clicked on button 1 or button 2)
</div>
<div id="result2" style="display:none">
Number of clicks = 2 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1)
</div>
<div id="result3" style="display:none">
Number of clicks = 2 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2)
</div>
<div id="result4" style="display:none">
Number of clicks = 3 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1 and 3rd time clicked on button 1)
</div>
<div id="result5" style="display:none">
Number of clicks = 3 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 1 and 3rd time clicked on button 2)
</div>
<div id="result6" style="display:none">
Number of clicks = 3 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2 and 3rd time clicked on button 1)
</div>
<div id="result7" style="display:none">
Number of clicks = 3 (1st time clicked on button 1 or button 2 and 2nd time clicked on button 2 and 3rd time clicked on button 2)
</div>
<div id="result8" style="display:none">
To Be Continued
</div>
<div id="result9" style="display:none">
To Be Continued
</div>
<br />
Choose One Option:
<input type="button" id="option1" value="button1" onclick="doFunction('button1')" />
<input type="button" id="option2" value="button2" onclick="doFunction('button2')" />
</div>
</body>
</html>
Subscribe to:
Posts (Atom)
No comments:
Post a Comment