<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Change button Exercise</title>
<link rel="stylesheet" href="Exercise 008 CSS button codes.css">
</head>
<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>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Change button Exercise</title>
<link rel="stylesheet" href="Exercise 008 CSS button codes.css">
</head>
<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>