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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...