Is there any way to change the background color of a button? I have this calculator i made, (beta), and i want it so tat when you click on an operator that button gets highlighted. How do you change the background color of a button, or even the outline, or even the text color!?!?! :)Here's the code:
<head><title>Calculator</title><script type="text/javascript">function foc(){ zah() document.forms.myForm[0].focus()}function numberletter(){ z = "0" while (z == "0") { x = document.forms.myForm[0].value y = x.length if(y == 0) { return } for(i = 0;i<y;i++) { z = "0" for(j=0;j<10;j++) { if(x.substring(i,i+1)==j) { z="1" } } if(z=="0") { if(i==0) { document.forms.myForm[0].value=x.substring(1,y) } else { document.forms.myForm[0].value=x.substring(0,i)+x.substring(i+1,y) } i=99 } } }}function operator(operator){ document.forms.myForm[17].value=operator document.forms.myForm[18].value=document.forms.myForm[0].value document.forms.myForm[0].value=""}function alrt(){ alert("BKAH")}function calculate(first,second,operator){ if (first.length==0) { alert("Please enter 2 numbers and an operator before calculating."); zah() return } if (second.length==0) { alert("Please enter 2 numbers and an operator before calculating."); return } if (operator.length==0) { alert("Please enter 2 numbers and an operator before calculating."); return } if (operator=='+') { var y=eval(first)+eval(second) document.forms.myForm[0].value=y } if (operator=='-') { var y=eval(first)-eval(second) document.forms.myForm[0].value=y } if (operator=='*') { var y=eval(first)*eval(second) document.forms.myForm[0].value=y } if (operator=='/') { var y=eval(first)/eval(second) document.forms.myForm[0].value=y }}function clrlast(){ var v = document.forms.myForm[0].value var l = v.length if(l > 0) { var b = v.substring(0,l-1) document.forms.myForm[0].value=b }}function zah(){ document.forms.myForm[0].value="" document.forms.myForm[18].value="" document.forms.myForm[17].value=""}function called(num) //start function that recieves button clicks{ var blah=document.forms.myForm[0].value length = blah.length //put the length of the text box into "length" if(!(num=='0' && length==0)) //checking if the first digit in the box is not 0 { x=document.forms.myForm[0].value y=x+num document.forms.myForm[0].value=y } num="" //undefine variables length="" //"" document.forms.myForm[21].value=blah}</script></head><body onload="foc()"><fieldset><form name="myForm"> <center> <input type="text" dir="rtl" value="1" onchange="numberletter()"><br> <input type="button" value="9" onclick="called('9')"> <input type="button" value="8" onclick="called('8')"> <input type="button" value="7" onclick="called('7')"> <input type="button" value="+" onclick="operator('+')"><br> <input type="button" value="6" onclick="called('6')"> <input type="button" value="5" onclick="called('5')"> <input type="button" value="4" onclick="called('4')"> <input type="button" value="-" onclick="operator('-')"><br> <input type="button" value="3" onclick="called('3')"> <input type="button" value="2" onclick="called('2')"> <input type="button" value="1" onclick="called('1')"> <input type="button" value="*" onclick="operator('*')"><br> <input type="button" value="0" onclick="called('0')"> <input type="button" value="C" onclick="clrlast()"> <input type="button" value="CA" onclick="zah()"> <input type="button" value="/" onclick="operator('/')"><br> <input type="hidden" value=""> <input type="hidden" value=""><br> <input type="button" value=" = " onclick="calculate(document.forms.myForm[18].value,document.forms.myForm[0].value,document.forms.myForm[17].value)"></form></center></fieldset></body>
Also, and suggestions would be nice. Thanks.PS. Please do not comment on the complex stuff at the top; i know i can make the text box read only, but where's the fun in that? :(PSS. If anyone could put the buttons in a table to make them line up it would be nice. I'm lazy.
