Jump to content

calculator sin cos tan


Recommended Posts

i have made a calculator.where i want to put sin, cos and tan button .and thats not the problem.i want a single function to emplement sin ,tan ,cos without creating three different function.

whole code is here...

<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>.its{	width:32%;	font-size:20px;	color:blue;	margin:0 auto;	}#gets{	width:289px;	height:50px;	font-size:20px;	color:red;}</style></head><body><form style="background-color:grey;display:inline-block;height:290px;width:300px;padding:10px;"><input type="text" id="gets" value="calculator(press CLR to begin)"></br><input type="button" value="0" onClick="calc(this.value);" class="its"><input type="button" value="1" onClick="calc(this.value);" class="its" ><input type="button" value="+" onClick="calc(this.value);" class="its"> <input type="button" value="2" onClick="calc(this.value);" class="its"><input type="button" value="3" onClick="calc(this.value);" class="its"><input type="button" value="-" onClick="calc(this.value);" class="its"><input type="button" value="4" onClick="calc(this.value);" class="its"><input type="button" value="5" onClick="calc(this.value);" class="its"><input type="button" value="/" onClick="calc(this.value);" class="its" ><input type="button" value="6" onClick="calc(this.value);" class="its"><input type="button" value="7" onClick="calc(this.value);" class="its"><input type="button" value="*" onClick="calc(this.value);" class="its"><input type="button" value="8" onClick="calc(this.value);" class="its"><input type="button" value="9" onClick="calc(this.value);" class="its" ><input type="button" value="=" onClick="ev('gets');" class="its"><input type="button" value="sqrt" onClick="sqr('gets');" class="its" ><input type="button" value="%" onClick="calc(this.value);" class="its"><input type="button" value="CLR" onClick="clr('gets');"class="its" ><input type="button" value="log" onClick="logit('gets');" class="its" ><input type="button" value="sin" onClick="trig('gets',sin);" class="its" ><input type="button" value="tan" onClick="trig('gets',tan);" class="its"><input type="button" value="cos" onClick="trig('gets',cos);"class="its" ></form><script>function calc(i){document.getElementById("gets").value +=i;				}function ev(el){var c=eval(document.getElementById("gets").value);	document.getElementById("gets").value=c;}function clr(el){	var m=document.getElementById(el);	m.value="";}function sqr(el){var c=document.getElementById(el);var v=Math.sqrt(c.value);c.value=v;}function logit(el){	var c=document.getElementById(el);	var v=Math.log(c.value);	c.value=v;}function trig(el,oprtr){	var m=document.getElementById(el);	var v=Math.oprtr(m.value);	m.value=v;}</script></body></html>

for convenience i am giving the codes for sin cos and tan seperately ...

<input type="button" value="sin" onClick="trig('gets',sin);" class="its" ><input type="button" value="tan" onClick="trig('gets',tan);" class="its"><input type="button" value="cos" onClick="trig('gets',cos);"class="its" >

i want those three executed using only one function.anyone explain to me why this doesn't work?and the script is ...

function trig(el,oprtr){	var m=document.getElementById(el);	var v=Math.oprtr(m.value);	m.value=v;}
Edited by alzami
Link to comment
Share on other sites

sin, cos, and tan are property methods of the Math object, and you're just passing sin cos and tan. Javascript has no idea what those are. include the entire Math.sin, Math.cos, and Math.tan into the function calls.

<input type="button" value="sin" onClick="trig('gets',Math.sin);" class="its" ><input type="button" value="tan" onClick="trig('gets',Math.tan);" class="its" ><input type="button" value="cos" onClick="trig('gets',Math.cos);" class="its" >

the trig function has the entire function reference this way so the it doesn't even need to know that it's using the Math object or it's trig methods

function trig(el,oprtr){	var m=document.getElementById(el);	m.value=oprtr((m.value+0));}
Link to comment
Share on other sites

force of habit. I like to make sure when I want a number I append a +0 in case the passed in value could be a non-number, so that javascript casts the variable to a number. if the value is already a number nothing really happens. if its a boolean true becomes 1 and false 0. undefined and nulls become 0. and objects should run their valueOf() method automatically. while strings that don't appear as numbers will become NaN (as far as javascript is concerned, NaN or Not-a-Number, is a number... just a special type).


sometimes javascript can be confused as to whether a primitive should be a string or number, as it all depends on the context of the value being used. The Math object should provide the right context, though, and often times you needn't worry. This is just a simple enforcement of the type-casting.


this habit of mine mostly originated from writing out formulas in Excel, when I wanted something to be either X or 1, or either X or 0, based on a true/false data validation field you would have to do either X^boolean or X*boolean to get that.

Edited by Hadien
Link to comment
Share on other sites



i would like to know how and why it works???why use "[ ]".is it some kind of array???

In Javascript everything is an object, including an array. One side effect of that is that you can use array syntax to refer to object methods and properties. This would work fine, for example:


window["alert"]("this is alert text");




var el = document["getElementById"]('some_id');


If you're checking the length of an array, you can use array.length or array["length"], they refer to the same thing.

  • Like 1
Link to comment
Share on other sites



actually some trig function values are undefined.i need my calculator to show that.some trig function is not working properly in javascript.say tan 45 supposed to be "1". its showing 1.6..... somehow .confiused!!!! :|

The trig functions use radians, not degrees. You'll need to convert degrees to radians if you want to use degrees.


var rad = deg * Math.PI/180;
Link to comment
Share on other sites

thanks !and one simple thing to ask tan 90(degree)is undefined but my clac shows a number which is quite big.16331778728383844 .i coverted it to degree.but its not showing undefined

function trig(el,oprtr){	var m=document.getElementById(el);	var p=(m.value)*( Math.PI/180);	var v=Math.ceil(oprtr(p));	m.value=v;}
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...