Jump to content

My Calculator


Chocolate570

Recommended Posts

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

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

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

<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

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

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

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

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

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) }
:D
Link to comment
Share on other sites

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

Only one that pertains to use of Web Browsers. I do have dreams about other stuff though. But I digress... :)

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

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...

:)Yeah, you really have to. Cause your javascript way is just too hard... :)
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...