The purpose of my code is to solve a system of three equations.
What I want to happen is for the "p" selector and the "answer" class to be hidden. When there is a "click" event on an "h1" selector, I want it to show the next element. However, after there is a click event on the class "button" I want the "matrix" class to slide up and then the "answer" class to slide down, revealing the answer to the HTML form's results while hiding or "slideUp"ing the original form and heading.
Originally the "my_code.js" file had no problem hiding the "p" element and slideToggling it when an h1 selector before it was clicked, but once I added the additional code, things went south.
What is happening in my jquery script? Am I targeting ancestors elements incorrectly?
JQUERY DOCUMENT
$(document).ready(function() {
$("p, .answer").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
$(".button")click(function() { //after form submission
$(".matrix").slideUp(300, function(){ //hiding the matrix form
$(".answer").slideDown(300); //and display the answer
});
});
});
HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Kremer's Rule: System of Three Equations</title>
<script language="JavaScript">
function testResults (form) {
function system (x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3){
this.x1 = x1;
this.x2 = x2;
this.x3 = x3;
this.y1 = y1;
this.y2 = y2;
this.y3 = y3;
this.z1 = z1;
this.z2 = z2;
this.z3 = z3;
this.a1 = a1;
this.a2 = a2;
this.a3 = a3;
this.calcDanswer = function() {
return (this.x1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*D.y3)- (this.y2*this.x3)));
};
this.calcXanswer = function(){
return (this.a1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.a2*this.z3)-(this.z2*this.a3))) + (this.z1*((this.a2*this.y3)-(this.y2*this.a3)));
};
this.calcYanswer = function(){
return (this.x1*((this.a2*this.z3)-(this.z2*this.a3))) - (this.a1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*this.a3)-(this.a2*this.x3)));
};
this.calcZanswer = function(){
return (this.x1*((this.y2*this.a3)-(this.a2*this.y3))) - (this.y1*((this.x2*this.a3)-(this.a2*this.x3))) + (this.a1*((this.x2*this.y3)-(this.y2*this.x3)));
};
}
var x1 = form.x1.value;
var x2 = form.x2.value;
var x3 = form.x3.value;
var y1 = form.y1.value;
var y2 = form.y2.value;
var y3 = form.y3.value;
var z1 = form.z1.value;
var z2 = form.z2.value;
var z3 = form.z3.value;
var a1 = form.a1.value;
var a2 = form.a2.value;
var a3 = form.a3.value;
var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
var X = D.calcXanswer()/D.calcDanswer();
var Y = D.calcYanswer()/D.calcDanswer();
var Z = D.calcZanswer()/D.calcDanswer();
// printing to console
var out = document.getElementById('real-answer');
out.innerHTML += "<b>The equations are:</b>" + "<br />" +
D.x1 + "x + " + D.y1 + "y + " + D.z1 +"z = "+D.a1 + "<br />" +
D.x2 + "x + " + D.y2 + "y + " + D.z2 +"z = "+D.a2 + "<br />" +
D.x3 + "x + " + D.y3 + "y + " + D.z3 +"z = "+D.a3 + "<br /><br />" +
"The answer for D is " + D.calcDanswer() + "<br />" +
"The answer for Dx is " + D.calcXanswer() + "<br />" +
"The answer for Dy is " + D.calcYanswer() + "<br />" +
"The answer for Dy is " + D.calcZanswer() + "<br />" +
"X is " + X + "<br />" +
"Y is " + Y + "<br />" +
"Z is " + Z;
}
</SCRIPT>
</head>
<body>
<!--DIRECTIONS-->
<h1><span id="highlight">How Does This Work?</span></h1>
<p>Type in all the information for your system of three equations.<br />
When finished hit "Go".</p>
<!--Form-->
<p class="matrix">
<FORM NAME="myform" ACTION="" METHOD="GET">
<input type="text" name="x1"> x + <input type="text" name="y1"> y + <input type="text" name="z1"> z = <input type="text" name="a1"><br />
<input type="text" name="x2"> x + <input type="text" name="y2"> y + <input type="text" name="z2"> z = <input type="text" name="a2"><br />
<input type="text" name="x3"> x + <input type="text" name="y3"> y + <input type="text" name="z3"> z = <input type="text" name="a3"><br />
<input type="button" class="button" name="button" value="GO" onClick="testResults(this.form)">
</form>
</p>
<div id="answer">
<h1><span id="highlight">The Answer:</span></h2>
<div id='real-answer'></div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</html>
Your Jquery code line #9:
$(".button")click(function() {
You are missing a "." after the selector:
$(".button").click(function() {
I see a number of issues:
You missed a period in $(".button")click, should be $(".button").click
The fiddle had a closing script tag (which aren't needed there, fyi) but you had no closing brackets for the document.ready function
You have an inline onClick handler calling a function defined inside the document.ready function. That won't be visible to the html element. You're using jquery already so just use a click handler
You have several functions wrapped inside each other for the calculator part, that's not needed and will cause some scope problems. You're mixing native js with jquery as well, document.getElement* type code when you have the $ selector available
A fiddle to get you started
Your second <h1> (the new one) is closed with </h2>. (Might not be the primary problem.)
Related
Good Day ! Help is greatly appreciated !
function ShowDistance() {
var x1 = parsefloat(document.getElementById('xOne').value);
var x2 = parsefloat(document.getElementById('xTwo').value);
var y1 = parsefloat(document.getElementById('yOne').value);
var y2 = parsefloat(document.getElementById('yTwo').value);
var distance = Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
return distance;
if (!isNaN(result)) {
document.getElementById('outPut').innerHTML = 'The distance bewtween (' + x1 + ',' + y1 + ') and (' + x2 + ',' + y2 + ') is ' + distance + ;
}
}
<!doctype html>
<html>
<head>
<title> Distance Calculator </title>
</head>
<body>
<h2>Distance Calculator</h2>
Coordinate 1 (<input type="text" id="xOne" size=12 value=''> ,
<input type="text" id="yOne" size=12 value=''>)
<br> Coordinate 2 (<input type="text" id="xTwo" size=12 value=''> ,
<input type="text" id="yTwo" size=12 value=''>)
<br>
<br>
<button onclick="ShowDistance()">Calculate</button>
</body>
</html>
can't print the result. That is the only problem . I can't print the result.
Please help me. your reply will be great much appreciated
There are a lot of mistakes in your code;
1- First of all, not parsefloat it should be parseFloat;
2- The second one, you return from the ShowDistance without showing the result;
3- Third one, in the if clause should be if(!isNaN(distance)) and not if(!isNaN(result));
4- You did forget to create the Html tag with output id where you wanted to print the result.
all of the code;
<!doctype html>
<html>
<head>
<title> Distance Calculator </title>
</head>
<body>
<h2>Distance Calculator</h2>
Coordinate 1 (<input type="text" id="xOne" size=12 value=''> ,
<input type="text" id="yOne" size=12 value=''>)
<br>
Coordinate 2 (<input type="text" id="xTwo" size=12 value=''> ,
<input type="text" id="yTwo" size=12 value=''>)
<br>
<br>
<button onclick="ShowDistance()">Calculate</button>
<div id="outPut">
</div>
<script>
function ShowDistance()
{
var x1=parseFloat(document.getElementById('xOne').value);
var x2=parseFloat(document.getElementById('xTwo').value);
var y1=parseFloat(document.getElementById('yOne').value);
var y2=parseFloat(document.getElementById('yTwo').value);
var distance =Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );
if (!isNaN(distance))
{
document.getElementById('outPut').innerHTML='The distance bewtween (' + x1 + ',' + y1 + ') and (' + x2 + ',' + y2 + ') is '+ distance;
}
return distance;
}
</script>
</body>
</html>
return distance;
Will cause any subsequent code not to be ran, as the return keyword will stop the execution of code, so:
if (!isNaN(distance))
{
document.getElementById('outPut').innerHTML='The distance bewtween (' + x1 + ',' + y1 + ') and (' + x2 + ',' + y2 + ') is '+ distance;
}
Will never run.
Place the code above the return, or remove the return as the value it returns isn't used. You should see a new result.
I need to display the data entered into several text fields using div elements. There should be a dedicated div for each text input.
I have looked around all I have found is how to create dynamic inputs. But none of them explains how to use the created fields to read the info and display the info
function display_array()
{
var e = "<hr/>";
for (var y=0; y<array.length; y++)
{
e += "Element " + y + " = " + array[y] + "<br/>";
}
document.getElementById("Result").innerHTML = e;
}
//Counter to maintain number of textboxes and give them unique id for later reference
var intTextBox = 0;
/**
* Function to add textbox element dynamically
* First we incrementing the counter and creating new div element with unique id
* Then adding new textbox element to this div and finally appending this div to main content.
*/
function addElement() {
intTextBox++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'div_' + intTextBox);
objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" name="tb_' + intTextBox + '"/>';
document.getElementById('content').appendChild(objNewDiv);
}
/**
* Function to remove textbox element dynamically
* check if counter is more than zero then remove the div element with the counter id and reduce the counter
* if counter is zero then show alert as no existing textboxes are there
*/
function removeElement() {
if(0 < intTextBox) {
document.getElementById('content').removeChild(document.getElementById('div_' + intTextBox));
intTextBox--;
} else {
alert("No textbox to remove");
}
}
<p>Demo of adding and removing textboxes dynamically using simple JavaScript</p>
<p>
Add
Remove
</p>
<div id="content"></div>
<input type="button" id="button2" value="Display" onclick="display_array();"></input>
<div id="Result"></div>
i give you 3 changes and not sure if that is what you want,see this demo:
https://jsfiddle.net/xianshenglu/ev1f38L3/
first change: add var array,,,,
var array=document.getElementsByClassName('tb');
second，add .value
e += "Element " + y + " = " + array[y].value + "<br/>";
third,add class="tb"
objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text"
id="tb_' + intTextBox + '" class="tb" name="tb_' + intTextBox + '"/>';
I have updated the code to output two separate text fields but to have it display together is not working.
function display_array()
{
var array=document.getElementsByClassName('tb');
var e = "<hr/>";
var array2=document.getElementsByClassName('tb2');
var e2 = "<hr/>";
for (var y=0; y<array.length; y++)
{
e += array[y].value ''+'' e2 += array2[y].value;
// e2 += "Mac " + y + " = " + array2[y].value;
}
document.getElementById("Result").innerHTML = e + 'm' + e2;
//document.getElementById("Result2").innerHTML = e;
}
//Counter to maintain number of textboxes and give them unique id for later reference
var intTextBox = 0;
var intTextBox2 = 0;
/**
* Function to add textbox element dynamically
* First we incrementing the counter and creating new div element with unique id
* Then adding new textbox element to this div and finally appending this div to main content.
*/
function addElement() {
intTextBox++;
intTextBox2++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'div_' + intTextBox);
objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" class="tb" name="tb_' + intTextBox + '"/>';
document.getElementById('content').appendChild(objNewDiv);
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'div_' + intTextBox);
objNewDiv.innerHTML = 'Textbox1 ' + intTextBox + ': <input type="text" id="tb2_' + intTextBox + '" class="tb2" name="tb2_' + intTextBox + '"/>';
document.getElementById('content').appendChild(objNewDiv);
}
<p>Demo of adding and removing textboxes dynamically using simple JavaScript</p>
<p>
Add
Remove
</p>
<div id="content"></div><div id="content2"></div>
<input type="button" id="button2" value="Display" onclick="display_array();"></input>
<div id="Result"></div>
I'm trying to learn Javascript and I feel like I have a decent grasp on the fundamentals but I am having problems making it do things that i want .. for example.. I am trying to create a simple form in html that calculates the sum of 2 numbers.. here is my html and javascript:
<head>
<script type="text/javascript">
function adder(a,b) {
var a = document.getElementById('firstNum').value;
var b = document.getElementById('secondNum').value;
var numbers = new Array(a,b);
var sum = 0;
for (i=0; i < numbers.length; i++) {
sum += parseInt(numbers[i]);
}
//this part i need help with
document.getElementById('answer').write("First Number: " + a + " plus Second Number: " + b + " is " + sum).value; //this part i need help with
</script>
</head>
<body>
<form id="additionForm">
A + B = C : <input type="text" id="firstNum" placeholder="A">
+ <input type="text" id="secondNum" placeholder="B">
<input type="button" id="addBtn" value="Add" onClick="adder();">
= <input type="text" id="answer" placeholder="C">
</form>
</body>
My problem is that i don't know how to get the javascript to overwrite the value attribute for my form input id=answer .. or if i'm supposed to be using Jquery instead .. thanks in advance.
function adder() {
var a = parseInt( document.getElementById('firstNum').value, 10);
var b = parseInt( document.getElementById('secondNum').value, 10);
var sum = a + b;
//this part i need help with
document.getElementById('answer').value = "First Number: " + a + " plus Second Number: " + b + " is " + sum).value; //this part i need help with
}
If you want to modify an input field in javascript, you can simply set the value attribute:
document.getElementById('answer').value = "First Number: " + a + " plus Second Number: " + b + " is " + sum;
I try to build an register form. This register form as text box called "address1" and near it a button called "Add Address". The function of the button - it adds text box for more addresses. the button near the previous address boxes changes to "Remove" which remove the address box and the button. The problem is: I have to set the text boxes in order - 1,2,3,... - I have to change their names and id's. For example - if I remove addressbox number 4 (name, id="address4") then all the next text boxes's names and id's should decrease by 1. I try to do this in for loop. This is hard to explain so I just give you the code. Try in your VS to write for example 'document.getElementById("address"+n).' and you'll see that you even don't see in the list you get that you can write after the dot id or name or value. I realized it is because there is a variable in this is the problem I think. Now here's the code:
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript">
var n1 = 1; //counting the buttons and divs. doesn't decrease.
//In another words - it counts the number of calls to Add()
var n3 = 1; //counting the address text fields.
//It being reduced and increased so that it will represent the exact number of text fields
function Add() {
n1++;
n3++;
s1 = "<div id='div" + n1 + "'>";
s1 += "Address <input type='text' name='address" + n3 + "' id='address" + n3 + "' />";
s1 += "<input type='button' name='add" + n1 + "' id='add" + n1 + "' value='Add Branch' onclick='Add();' /><br />";
s1 += "</div>";
var n2 = n1 - 1;
document.getElementById('div' + n2).insertAdjacentHTML('afterEnd', s1);
document.getElementById('add' + n2).onclick = function () { Remove(n2, (n3-1)); };
document.getElementById('add' + n2).value = 'Remove';
}
function Remove(nn1, nn2) { //nn1 - div number to remove. nn2 - the address field number in this div
var parent = document.getElementById('barcode');
var child = document.getElementById('div' + nn1);
parent.removeChild(child);
for (nn2 += 1; nn2 <= n3; nn2++) {
var n2 = nn2 - 1; //nn2 - current address text field. n2 - the new number for the address field
document.getElementById('address' + nn2).setAttribute('name', 'address' + n2);
document.getElementById('address' + nn2).setAttribute('id', 'address' + n2);
document.getElementById('address' + n2).setAttribute('value', 'address' + n2);
// try: document.getElementById('address' + nn2).name='address'+n2. doesn't work (for me)
}
n3--;
}
var check = false;
</script>
</head>
<body>
<form name='barcode' id='barcode' action="" >
<div id='div1'>
Address <input type='text' name='address1' id='address1' />
<input type='button' name='add1' id='add1' value='Add Branch' onclick='Add();' /><br />
</div></form>
</body>
</html>
Sorry for the disorder :) I keeped in this code only what linked to the address field and I added comments.
Thanks very much!
edit:
I forgot that you don't see the bug in this code because I already tried to fix it. Before I changed the code it ordered all the divs, text fields and add/remove buttons so all the exsisting items will always be numbered in order (1, 2, 3, ...).
The problem in the following code can be seen if you click 2 times add button, then you remove the first address field and then you click the add button again.
<html>
<head>
<script type="text/javascript">
var n1 = 1;
function Add() {
n1++;
s1 = "<div id='div" + n1 + "'>";
s1 += "Address <input type='text' name='address" + n1 + "' id='address" + n1 + "' />";
s1 += "<input type='button' name='add" + n1 + "' id='add" + n1 + "' value='Add Branch' onclick='Add()' /><br />";
s1 += "</div>";
var n2 = n1 - 1;
document.getElementById('div' + (n2)).insertAdjacentHTML('afterEnd', s1);
document.getElementById('add' + (n2)).onclick = function () { Remove(n2); };
document.getElementById('add' + (n2)).value = 'Remove';
}
function Remove(n) {
var parent = document.getElementById('barcode');
var child = document.getElementById('div' + n);
parent.removeChild(child);
for (n += 1; n <= n1; n++) {
var n2 = n1 - 1;
document.getElementById('add' + n).onclick = function () { Remove(n2); };
document.getElementById('address' + n).setAttribute('name', 'address' + n2);
document.getElementById('add' + n).setAttribute('name', 'add' + n2);
document.getElementById('address' + n).setAttribute('id', 'address' + n2);
document.getElementById('add' + n).setAttribute('id', 'add' + n2);
document.getElementById('div' + n).setAttribute('id','div' + n2);
}
n1--;
document.getElementById('add' + n1).onclick = function () { Add() };
}
</script>
</head>
<body>
<form name='barcode' id='barcode' action="" >
<div id='div1'>
Address <input type='text' name='address1' id='address1' />
<input type='button' name='add1' id='add1' value='Add Branch' onclick='Add();' /><br />
</div>
</form>
</body>
</html>
I think you are working a bit too hard to maintain the order of the addresses and i don't see a general reason to do it (if you have one, please add it to your question).
If you add the inputs with a unique index like you are doing, they will always be different and ordered.
Here's what you can do:
Pass the event caller to the functions Add and Remove and inside you can make the changes you want to those elements.
For example your Remove function (that you would call with Remove(this);) would look like this:
function Remove(callerButton) {
var parent = document.getElementById('barcode');
var child = callerButton.parentNode;
// child is the DIV you want to remove
parent.removeChild(child);
n3--;
}
This way you wouldn't need to do all the sorting you are doing right now.
At the end you can access all the remaining elements with:
var addresses = document.getElementById("barcode").getElementsByTagName("input");
for(var i = 0; i < addresses.length; i++) {
if(addresses[i].type == "text") {
// I'm printing them in the console, you can do with it whatever you like
// If you want to exclude the one with "Add Branch in front of it you can validate for address+n1
console.log("Element.id : " + addresses[i].id + " - Element.value: "+ addresses[i].value );
}
}
I added a jsFiddle with these changes (added a submit button to show the remaining fields in the form).
See if it solves your problem.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
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?
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.