INTERACTIVE MEDIA DESIGN (Midterm): Change Button Properties on Change Event
ASSIGNMENT 2.3
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Change button Exercise</title>
</head>
<style type="text/css">
* {
box-sizing: border-box;
}
h1.font1 {
margin-left: 30%;
}
fieldset {
width: 60%;
background-color: #512FCC;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 5%;
margin-top: 30px;
margin-left: 19%;
border: 0;
font-style: "century gothic";
}
body {
font-family: "century gothic";
background-color:#DBC7FF;
color: #EAE4FF;
}
.btn {
width: 140px;
height: 70px;
border-radius: 10px;
background-color: white;
text-shadow: -1px 1px 0 #ffffff, 1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff;
font-size: 20px;
font-weight: bold;
float: left;
margin-left: 5px;
}
</style>
<body>
<fieldset>
<h1> Change Button Properties onchange Events </h1>
<h3> Enter Color: </h3>
<input type="text" id="input1"/> <br>
<h3> Enter number: </h3>
<input type="number" id="input2" onchange="onchangeevent()"/> <br> <br> <br>
<input class="btn" type="button" id="display1">
<input class="btn" type="button" id="display2">
<input class="btn" type="button" id="display3">
<input class="btn" type="button" id="display4">
<input class="btn" type="button" id="display5">
</fieldset>
<script>
function onchangeevent()
{
document.getElementById("input2");
n=document.getElementById("input2").value;
c=String(document.getElementById("input1").value);
switch(Number(n))
{
case 1: document.getElementById("display1").style.background=c;
document.getElementById("display1").value=c;
break;
case 2: document.getElementById("display2").style.background=c;
document.getElementById("display2").value=c;
break;
case 3: document.getElementById("display3").style.background=c;
document.getElementById("display3").value=c;
break;
case 4: document.getElementById("display4").style.background=c;
document.getElementById("display4").value=c;
break;
case 5: document.getElementById("display5").style.background=c;
document.getElementById("display5").value=c;
break;
default: document.getElementById("display1").style.background=c;
document.getElementById("display1").value=c;
break;
}
}
</script>
</body>
</html>
RESULT:
Comments
Post a Comment