Search code examples
javascripthtmltrigonometryinversedegrees

Degrees conversion isn't working with inverse trignometry


I'm creating a calculator strictly using JavaScript and I found myself with a problem while creating the inverse functions of the trigonometry stuff. Everything worked while using radians, but in degrees, I got the wrong answers.

I wish it was as simple as my conversions being wrong, but everything else using degrees (i.e. the non-inverse trigonometry stuff) was working perfectly. The following code are the parts of the calculator that have any relationship with the degrees conversion and the trig stuff.

CODE SNIPPET:

<html>
 	<head>
      <script language="javascript" type="text/javascript">
        var degVal = true;
        var Deux = false;
        function toDegrees(angle, mode){ //This function converts radians to degrees, and vice versa
		  if (degVal == true){
		    mode = (Math.PI/180); //for some reason this incorrect conversion formula spits out the correct answers
		  }
		  else if (degVal == false){
			    mode = 1;
		  }
		  return angle * mode;
		  }
		function BasicTrig(TrigFunc, TrigInv){
		  var val1 = toDegrees(parseFloat(document.getElementById("value1").value));
		  var ansD = document.getElementById("answer");
          if (Deux == false){
		    ansD.value = TrigFunc(val1);
		  }
		  else if (Deux == true){
            ansD.value = TrigInv(val1); //For some reason, doesn't work in degrees
          }
		}
	    function MoreTrig(TrigEq, TrigEqInv){ // This function allows csc, sec, & cot to be performed
		  var val1 = toDegrees(parseFloat(document.getElementById("value1").value));
		  var ansD = document.getElementById("answer");
		  if (Deux == false){
		    ansD.value = 1 / TrigEq(val1);
		  }
		  else if (Deux == true){
            ansD.value = TrigEqInv(1 / val1); //Also doesn't work in degrees
          }
		}
        function Deuxieme(){ //2nd function (Calculator) button
          if (Deux == false){
            document.getElementById("LeDeux").style.backgroundColor = "orange";
			Deux = true;
			document.getElementById("sinbutton").value = "sin⁻¹"; //changes sin to sin⁻¹
			document.getElementById("cosbutton").value = "cos⁻¹"; //changes cos to cos⁻¹
			document.getElementById("tanbutton").value = "tan⁻¹"; //changes tan to tan⁻¹
			document.getElementById("cscbutton").value = "csc⁻¹"; //changes csc to csc⁻¹ csc being cosec for those who are used to that
			document.getElementById("secbutton").value = "sec⁻¹"; //changes sec to sec⁻¹
			document.getElementById("cotbutton").value = "cot⁻¹"; //changes cot to cot⁻¹
          }
		  else if (Deux == true){
            document.getElementById("LeDeux").style.backgroundColor = "";
		    Deux = false;
			document.getElementById("sinbutton").value = "sin";
			document.getElementById("cosbutton").value = "cos";
		    document.getElementById("tanbutton").value = "tan";
		    document.getElementById("cscbutton").value = "csc";
   		    document.getElementById("secbutton").value = "sec"; 			document.getElementById("cotbutton").value = "cot";
          }
		}
        function RadDegHighlight(){ //Switches between Radians and Degrees
		  if (degVal == true){
		    document.getElementById("drbutton").value = "rad";
			degVal = false;
		  }
		  else if (degVal == false){
		    document.getElementById("drbutton").value = "deg";
		    degVal = true;
		  }
		}
      </script>
    </head>
    <body>
	  <input type="text" placeholder="x" style="width:48.5%" id="value1"/>
	  <input type="button" id="LeDeux" style="width:23.5%" value="2nd" onclick="Deuxieme()"/>
	   <input type="button" id="drbutton" style="width:23.5%" value="deg" onclick="RadDegHighlight()"/>
	   <input type="button" id="sinbutton" style="width:23.5%" value="sin" onclick="BasicTrig(Math.sin, Math.asin)"/>
	   <input type="button" id="cosbutton" style="width:23.5%" value="cos" onclick="BasicTrig(Math.cos, Math.acos)"/>
	   <input type="button" id="tanbutton" style="width:23.5%" value="tan" onclick="BasicTrig(Math.tan, Math.atan)"/>
	   <input type="button" id="cscbutton" style="width:23.5%" value="csc" onclick="MoreTrig(Math.sin, Math.asin)"/>
	   <input type="button" id="secbutton" style="width:23.5%" value="sec" onclick="MoreTrig(Math.cos, Math.acos)"/>
	   <input type="button" id="cotbutton" style="width:23.5%" value="cot" onclick="MoreTrig(Math.tan, Math.atan)"/>
	   <input type="text" placeholder="Answer" style="width:100%" id="answer"/>
  </body>
</html>

I assume the problem is somewhere in toDegrees, since everything else works in radians... about the Math.PI/180 for the radians to degrees conversion, as I said before, it works everywhere else, and I even tested it out and it just messes all of the other calculations up and doesn't fix the current problem.

I've tested all of the other calculations and they are correct. Again, everything in radians works, but the inverse functions do not work for degrees, but the normal functions do.


Solution

  • You’re converting the input of an inverse trig function from radians to degrees, but it’s not in radians in the first place. You need to convert the output when using the inverse.