Question

I’m trying to create a calculator in javascript for inverse trigonometry functions (arcsine, arccosine, arctangent) and I have it so there are checkboxes for each input so window.alert doesn’t return NULL (user-friendly).
The Form:

<form name="inverse">
        <legend>Legend is here.</legend>
        <input type="checkbox" name="inverse-cb1" value="sine"></input><label> sin<sup>-1</sup> ( </label><input type="text" size=5 name="sin"><label> )</label><br>
        <input type="checkbox" name="inverse-cb2" value="cosine"></input><label> cos<sup>-1</sup> ( </label><input type="text" size=5 name="cos"><label> )</label><br>
        <input type="checkbox" name="inverse-cb3" value="tangent"></input><label> tan<sup>-1</sup> ( </label><input type="text" size=5 name="tan"><label> )</label><br>
        <br><input type="button" onclick="trigI()" value="Calculate">
    </form>

The script:

function trigI(){
var sin = document.inverse.sin.value;      //sine
var cos = document.inverse.cos.value;      //cosine
var tan = document.inverse.tan.value;      //tangent

var sin1 = Math.asin(sin);      //arcsine
var cos1 = Math.acos(cos);      //arccosine
var tan1 = Math.atan(tan);      //arctangent

var sin1d = sin1 * (180/Math.PI);    //convert radians to degrees (sine)
var cos1d = cos1 * (180/Math.PI);    //convert radians to degrees (cosine)
var tan1d = tan1 * (180/Math.PI);    //convert radians to degrees (tangent)

if (isNaN(sin) || isNaN(cos) || isNaN(tan) ){
    window.alert("Please input a number.");

    return;
}

if (!document.inverse.inverse-cb1.checked){    //no sine input
    window.alert("When cos(\u2220) = " + cos + " and tan(\u2220) = " + tan + " :" + "\n\n" + "cos\u2212\u00B2(A) = " + cos1d + "\n" + "tan\u2212\u00B2(A) = " + tan1d + "\u00B0");

    return;
}

if (!document.inverse.inverse-cb2.checked){    //no cosine input
    window.alert("When sin(\u2220) = " + sin + " and tan(\u2220) = " + tan + " :" + "\n\n" + "sin\u2212\u00B2(A) = " + sin1d + "\u00B0" + "\n" + "tan\u2212\u00B2(A) = " + tan1d + "\u00B0");

    return;
}

if (!document.inverse.inverse-cb3.checked){    //no tangent input
    window.alert("When sin(\u2220) = " + sin + " and cos(\u2220) = " + cos + " :" + "\n\n" + "sin\u2212\u00B2(A) = " + sin1d + "\u00B0" + "\n" + "cos\u2212\u00B2(A) = " + cos1d + "\u00B0");

    return;
}

if (!document.inverse.inverse-cb1.checked && !document.inverse.inverse-cb2.checked){       //no sine and cosine input
    window.alert("When tan(\u2220) = " + tan + " :" + "\n\n" + "tan\u2212\u00B2(A) = " + tan1d + "\u00B0");

    return;
}

if (!document.inverse.inverse-cb2.checked && !document.inverse.inverse-cb3.checked){       //no cosine and tangent input
    window.alert("When sin(\u2220) = " + sin + " :" + "\n\n" + "sin\u2212\u00B2(A) = " + sin1d + "\u00B0");

    return;
}

if (!document.inverse.inverse-cb1.checked && !document.inverse.inverse-cb3.checked){       //no sine and tangent input
    window.alert("When cos(\u2220) = " + cos + " :" + "\n\n" + "cos\u2212\u00B2(A) = " + cos1d + "\u00B0");

    return;
}

if (!document.inverse.inverse-cb1.checked && !document.inverse.inverse-cb2.checked && !document.inverse.inverse-cb3.checked){     //no input or checked boxes
    window.alert("Please input a number or check the correct boxes.");

    return;
}

else {
    window.alert("When sin(\u2220) = " + sin + ", cos(\u2220) = " + cos + ", and tan(\u2220) = " + tan + " :" + "\n\n" + "sin\u2212\u00B2(A) = " + sin1d + "\u00B0" + "\n" + "cos\u2212\u00B2(A) = " + cos1d + "\u00B0" + "\n" + "tan\u2212\u00B2(A) = " + tan1d + "\u00B0");
    return;
}

}

The Question: The multiple if statements are not working so the function never returns. How can it be made to check to conditions of the input and respond in the proper way?

Answer 1

I can’t tell you what to do to make it “work”, since your desired result is pretty unclear, but a number of problems in your code jumped out at me as I skimmed it top to bottom. Some will still run but give results you aren’t expecting, but at least one problem will cause an error and stop the function running. So:

Most of your comments are either redundant and could be removed, or could be made redundant and removed if you made your variable names more descriptive.

The statement

if (isNaN(document.inverse.sin.value) == true || ...)

could be made simpler because you’ve already declared a variable sin that is equal to document.inverse.sin.value and the == true part is redundant. Just say

if (isNan(sin) || isNan(cos) || isNan(tan)) {

All of your “reset” statements like var sin = null; are both wrong and pointless because (a) using var means you are attempting to redeclare the variables (I think JS just ignores this), so you should just say sin = null;, but in any case (b) they’re local variables within your trigI() function so they’re all about to disappear anyway when the function returns. If you are trying to clear the fields on the screen you need to say document.inverse.sin.value = "";, but you don’t want to annoy the user by clearing all the fields just because one of them was invalid. Tell them which field had a problem, set focus to that field, and let them correct it themselves.

Most of your if statement test something like this:

if (document.inverse-cb1.checked == 'false'){

Which will never be true because you are comparing the .checked property that is a boolean equal to true or false with the string 'false'. You need to say

if (document.inverse-cb1.checked == false){    // note: no quotes
// OR, even better
if (!document.inverse-cb1.checked){

What is sup.sup() supposed to do? sup is a variable that you’ve set to -1. sup() is a non-existent function that in any case you shouldn’t be trying to call as a method of a number. Fix this first, because I think this is what is stopping the function returning.

EDIT: I noticed another big problem:

document.inverse.inverse-cb1.checked

You can’t use the “dot” object notation for properties that don’t follow the rules for JS identifier naming, and JS identifiers can’t have a “-” in them. So although “inverse-cb1” is a valid property name you have to use the array-style bracket [] syntax to access it:

document.inverse["inverse-cb1"].checked

Or you could just remove the “-” from both the html and your JS.