I'm seeking assistance in getting this code to function properly, specifically to display different colors and messages when specific buttons are clicked or hovered over.
My goals are:
- To change the background color of the page when the button
'colors'is hovered over - To show a message when the button
'msg'is clicked
As a beginner, I'm not sure what's wrong with the code, but I do know that the functions aren't triggering automatically.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script language="javascript">
function f1() {
document.bgcolor = "blue";
window.setTimeout("f2", 1200);
}
function f2() {
document.bgcolor = "indigo";
window.setTimeout("f3", 1200);
}
function f3() {
document.bgcolor = "violet";
window.setTimeout("f4", 1200);
}
function f4() {
document.bgcolor = "green";
window.setTimeout("f5", 1200);
}
function f5() {
document.bgcolor = "purple";
window.setTimeout("f6", 1200);
}
function f6() {
document.bgcolor = "yellow";
window.setTimeout("f7", 1200);
}
function f7() {
document.bgcolor = "orange";
window.setTimeout("f8", 1200);
}
function f8() {
document.bgcolor = "red";
window.setTimeout("f1", 1200);
f1();
}
function msg() {
window.status = "displaying 7 distinct colors"
}
</script>
<body>
<center>
<input type="button" name="b1" value="colors" onMouseOver="f1()">
<input type="button" name="b2" value="msg" onClick="msg()">
</center>
</body>
</html>