Chocolate570 Posted October 14, 2005 Share Posted October 14, 2005 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. Link to comment Share on other sites More sharing options...
Jonas Posted October 14, 2005 Share Posted October 14, 2005 You can try something like this: <html><head><style type="text/css">input {color: #000; background-color: #ccc;}</style></head><body><input type="button" value="1" onfocus="this.style='background-color: #ddff33; color: #ff0000; border: outset #000000 2px;'" onblur="this.style=''"></body></html> Heh, you may not want my colors though... Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 14, 2005 Author Share Posted October 14, 2005 It didn't work...wierd...the code makes perfect sense. Oh well, i guess i'll stop being lazy and learn css. Link to comment Share on other sites More sharing options...
Jonas Posted October 14, 2005 Share Posted October 14, 2005 http://www.w3schools.com/js/tryit.asp?file...om_event_buttonApparently, it only works in Opera... :)But, since onfocus and onblur didn't work, I tried the css suffix :active, and that worked...input:active {background-color: #ff0000;} Link to comment Share on other sites More sharing options...
Jonas Posted October 14, 2005 Share Posted October 14, 2005 <head><title>Calculator</title><style type="text/css"><!--form {width: 150px;border: outset 3px #000000;}input {width: 30px;background-color: #dedede;color: #000000;border: double #0000ff 3px;}input:active {background-color: #ff0000;}input.window {width: 132px;background-color: #ffffff;color: #000000;}input.sum {width: 132px;}--></style><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=operatordocument.forms.myForm[18].value=document.forms.myForm[0].valuedocument.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].valuevar l = v.lengthif(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].valuelength = 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 variableslength="" //""document.forms.myForm[21].value=blah}</script></head><body onload="foc()"><fieldset><form name="myForm"><center><table><tr><td colspan="4"><input class="window" type="text" dir="rtl" value="1" onchange="numberletter()"></td></tr><tr><td><input type="button" value="7" onclick="called('7')"></td><td><input type="button" value="8" onclick="called('8')"></td><td><input type="button" value="9" onclick="called('9')"></td><td><input type="button" value="+" onclick="operator('+')"></td></tr><tr><td><input type="button" value="4" onclick="called('4')"></td><td><input type="button" value="5" onclick="called('5')"></td><td><input type="button" value="6" onclick="called('6')"></td><td><input type="button" value="-" onclick="operator('-')"></td></tr><tr><td><input type="button" value="1" onclick="called('1')"></td><td><input type="button" value="2" onclick="called('2')"></td> <td><input type="button" value="3" onclick="called('3')"></td><td><input type="button" value="*" onclick="operator('*')"></td></tr><tr><td><input type="button" value="0" onclick="called('0')"></td><td><input type="button" value="C" onclick="clrlast()"></td><td><input type="button" value="CA" onclick="zah()"></td><td><input type="button" value="/" onclick="operator('/')"></td></tr><tr><td colspan="2"><input type="hidden" value=""></td><td colspan="2"><input type="hidden" value=""></td></tr><tr><td colspan="4"><input class="sum" type="button" value=" = " onclick="calculate(document.forms.myForm[18].value,document.forms.myForm[0].value,document.forms.myForm[17].value)"></td></tr></table></center></form></fieldset></body> Ok, so there's the code with tables... Also added some css to make the window and sum buttons wide enough... Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 15, 2005 Author Share Posted October 15, 2005 Thanks jonas, it looks great. I will have to modify it, as originally i wanted it so that when you click an operator(+,-,/,*, etc.) the operator gets highlighted. Link to comment Share on other sites More sharing options...
Jonas Posted October 15, 2005 Share Posted October 15, 2005 Ok, so you want just the operators? That's simple. Just put classes on the <input>s that are for operators.input.operator:active {some css: here;}In case you didn't know... :)You can of course change the styling of the buttons too, like the borders, but I think it looks fairly nice... Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 15, 2005 Author Share Posted October 15, 2005 So, i would doinput.operator:active{background:red}:S Link to comment Share on other sites More sharing options...
Jonas Posted October 15, 2005 Share Posted October 15, 2005 Correct. Or you could use R(ed)G(reen)B(lue) or #HEXinput.operator:active {background-color: RGB(255,0,0);background-color: #ff0000;background-color: red;}oh, and remember to assign the necessary class to the <input> elements...<input class="operator" value="+" etc. /> Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 15, 2005 Author Share Posted October 15, 2005 Thanks so much. I'll get down to putting all the code in today. Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 16, 2005 Author Share Posted October 16, 2005 Ok, i'm a pain in the neck, i know..I need some help.Because the answer-textbox in the calculator is "dir='rtl'" whenever the answer is a negative number, it automatically puts it to the right side. For example, if you did:90-91 The textbox would show1-So this is what i did in the operators section. if (operator=='+'){var y=eval(first)+eval(second)zoop=Math.abs(y)document.forms.myForm[0].value="-"+zoop} It turned out with the same thing, "1-". :)Does anyone know how i would accomplish fixing this without having to make the text box's dir ltr? Thanks! Choco Link to comment Share on other sites More sharing options...
Jonas Posted October 17, 2005 Share Posted October 17, 2005 You're gonna hate me for saying this, but it works fine in Opera... Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 17, 2005 Author Share Posted October 17, 2005 You're gonna hate me for saying this, but it works fine in Opera... <{POST_SNAPBACK}> Rofl. Well, most users use IE of FireFox. Link to comment Share on other sites More sharing options...
Jonas Posted October 17, 2005 Share Posted October 17, 2005 Well, most users use IE of FireFox.I have a dream... Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 17, 2005 Author Share Posted October 17, 2005 Only one? I usually have one per night. Anyway... :)No, seriously. Does anyone know how to make it work in firefox? Link to comment Share on other sites More sharing options...
Jack McKalling Posted October 17, 2005 Share Posted October 17, 2005 Sorry I haven't read your file above :)But it seems to be far too long to me, as 'just a calculator' :)Using CSS, you could change the class of a button, so it knows the new style already Then you don't have to define all inline styles with Javascript.Not like this:" document.getElementById("something").style.color = "a_color"document.getElementById("something").style.backgroundColor = "a_color"document.getElementById("something").style.borderColor = "a_color"document.getElementById("something").style.backgroundImage = "an_image"But like this:document.getElementById("something").className = "clsname2" #something.clsname1 { background-image: url(http://image.com/one.jpg) }#something.clsname2 { background-image: url(http://image.com/two.jpg) } Link to comment Share on other sites More sharing options...
Jonas Posted October 17, 2005 Share Posted October 17, 2005 Only one?Only one that pertains to use of Web Browsers. I do have dreams about other stuff though. But I digress... Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 18, 2005 Author Share Posted October 18, 2005 Only one that pertains to use of Web Browsers. I do have dreams about other stuff though. But I digress... <{POST_SNAPBACK}> Na-uh! I digress more than you!Before we go into CSS, i would like help with the javascript. Afterwards, i will post it in the css forum. Then you can have a go at it with all your fancy input.whatever#blah{} stuff. I really have to learn CSS... Link to comment Share on other sites More sharing options...
Jonas Posted October 18, 2005 Share Posted October 18, 2005 Before we go into CSS, i would like help with the javascript. Afterwards, i will post it in the css forum. Then you can have a go at it with all your fancy input.whatever#blah{} stuff. I really have to learn CSS...<{POST_SNAPBACK}> :)Yeah, you really have to. Cause your javascript way is just too hard... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now