In this example, we will discuss that how we change the Background Color of a Button with JavaScript. Here we will call the function on the onmouseover event of the Button Like this:
<input type="button" onmouseover="ChangeColor()" value="Button" id="btn1" />
Now we write the javascript code:
<script language="javascript">
function ChangeColor()
{
document.getElementById('btn1').style.backgroundColor='Red';
setTimeout("ChangeColor2()",2000);
}
function ChangeColor2()
{
document.getElementById('btn1').style.backgroundColor='Pink';
setTimeout("ChangeColor3()",2000);
}
function ChangeColor3()
{
document.getElementById('btn1').style.backgroundColor='Green';
setTimeout("ChangeColor4()",2000);
}
function ChangeColor4()
{
document.getElementById('btn1').style.backgroundColor='Red';
}
</script>
Complete Program:
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="javascript">
function ChangeColor()
{
document.getElementById('btn1').style.backgroundColor='Red';
setTimeout("ChangeColor2()",2000);
}
function ChangeColor2()
{
document.getElementById('btn1').style.backgroundColor='Pink';
setTimeout("ChangeColor3()",2000);
}
function ChangeColor3()
{
document.getElementById('btn1').style.backgroundColor='Green';
setTimeout("ChangeColor4()",2000);
}
function ChangeColor4()
{
document.getElementById('btn1').style.backgroundColor='Red';
}
</script>
</head>
<body>
<input type="button" onmouseover="ChangeColor()" value="Button" id="btn1" />
</body>
</html>