Exercise 8 Change Button Properties onchange event

on

 Exercise 8 Change Button Properties onchange event





<html>
<head> Javascript Events</head>
<style>
.btn{
   width:200px;
   height:200px;
   }
   fieldset 
   {
background: #C1D82F;
  
   }
          
    body {background-color: #00A4E4;}
    }
</style>

<body>
<fieldset>




<h1> Change Button Properties onchange events</h1>
<h2> Enter color</h2>
<input type="text" id="input1"/> 
    
<h2> Enter number</h2>
<input type="number" id="input2" onchange="onchangeevent()"/> <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">
    <input class="btn" type="button" id="display6">
    <input class="btn" type="button" id="display7">
    <input class="btn" type="button" id="display8">
    <input class="btn" type="button" id="display9">
    <input class="btn" type="button" id="display10">
                   

</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; 
               
               case 6: document.getElementById("display6").style.background=c;  
                  document.getElementById("display6").value=c; 
               break; 
               
               case 7: document.getElementById("display7").style.background=c;  
                  document.getElementById("display7").value=c; 
               break; 
               
               case 8: document.getElementById("display8").style.background=c;  
                  document.getElementById("display8").value=c; 
               break; 
               
               case 9: document.getElementById("display9").style.background=c;  
                  document.getElementById("display9").value=c; 
               break; 
               
               case 10: document.getElementById("display10").style.background=c;  
                  document.getElementById("display10").value=c; 
               break; 
               
               default: document.getElementById("display1").style.background=c;  
                  document.getElementById("display1").value=c; 
               break; 
        }        
}
//-->
</script>
</body>
</html>

Comments

Post a Comment