calculator sin cos tan

alzami · December 10, 2013

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 December 10, 2013 by alzami

Hadien · December 10, 2013

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));}

alzami · December 10, 2013

why had to use an extra parenthesis and +0 with it?

Hadien · December 10, 2013

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 December 10, 2013 by Hadien

justsomeguy · December 10, 2013

Passing the function name as a string would also work like this:

<input type="button" value="sin" onClick="trig('gets','sin');" class="its" >...var v=Math[oprtr](m.value);

alzami · December 10, 2013

@

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

alzami · December 10, 2013

@

Hadien

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!!!! :|

justsomeguy · December 10, 2013

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");

or

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.

justsomeguy · December 10, 2013

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;

alzami · December 10, 2013

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;}

justsomeguy · December 10, 2013

The tangent of 90 degrees is positive infinity. Tangent is sine divided by cosine. The cosine of 90 degrees is 0, so the tangent is a division by 0.

calculator sin cos tan

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in