write a java script to change the background and text color using buttons.
write a java script to change the background and text color using buttons.
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
#red{
background-color:red;
border-radius:10px;
height:40px;
width:100px;
border:none;
cursor:pointer;
}
#green{
cursor:pointer;
background-color:green;
border-radius:10px;
height:40px;
width:100px;
border:none;
}
#yellow{
background-color:yellow;
border-radius:10px;
height:40px;
width:100px;
border:none;
cursor:pointer;
}
#gray{
background-color:gray;
border-radius:10px;
height:40px;
width:100px;
border:none;
cursor:pointer;
}
#blue{
background-color:blue;
border-radius:10px;
height:40px;
width:100px;
cursor:pointer;
border:none;
}
#skyblue{
background-color:skyblue;
border-radius:10px;
height:40px;
width:100px;
cursor:pointer;
border:none;
}
#pink{
background-color:pink;
border-radius:10px;
height:40px;
width:100px;
cursor:pointer;
border:none;
}
#orange{
background-color:orange;
border-radius:10px;
height:40px;
width:100px;
cursor:pointer;
border:none;
}
</style>
<title>Change Page Background onload</title>
<script type="text/javascript">
function changeBg(){
newCol = prompt("Which color you should use for Background color");
document.body.style.background=newCol;
}
function red(){
document.getElementById("text").style.color="red";
}
function green(){
document.getElementById("text").style.color="green";
}
function yellow(){
document.getElementById("text").style.color="yellow";
}
function gray(){
document.getElementById("text").style.color="gray";
}
function blue(){
document.getElementById("text").style.color="blue";
}
function skyblue(){
document.getElementById("text").style.color="skyblue";
}
function pink(){
document.getElementById("text").style.color="pink";
}
function orange(){
document.getElementById("text").style.color="orange";
}
</script>
</head>
<body>
<button id="red" type="button" onclick="red()">RED</button>
<button id="green" onclick="green()">GREEN</button>
<button id="yellow" onclick="yellow()">YELLOW</button>
<button id="gray" onclick="gray()">GRAY</button>
<button id="blue" onclick="blue()">BLUE</button>
<button id="skyblue" onclick="skyblue()">SKYBLUE</button>
<button id="pink" onclick="pink()">PINK</button>
<button id="orange" onclick="orange()">ORANGE</button>
<p><h1 id="text"><b>
change the text color using buttons
</b></h1></p>
<body onload="changeBg()">
</body>
</html>
OUTPUT:
Comments
Post a Comment