I always wanted to do simple calculations in HTML and create simple online equation solvers. I spent some time on it and have created a simple equation solver. I have include the code here with lots of comments to try and help others who might want to learn. The biggest issue I had was with the button. I had to use a form input of type button rather than a button element (<button></button>). the button element would run the code but then reset everything to the defaults immediately. I still do not understand why. If you want to try this code, copy and past it into notepad and save as a .html file. Then open the file in an internet browser. Questions and comments are welcome.
Here is the equation solver:
Here is the source code:
-------------------------------------------------------
----------------------------------------------------------
Here is the equation solver:
Here is the source code:
-------------------------------------------------------
<! comments look like this. They are just here to help the programmer>
<! This program has embedded java scripts to solve an equation with certain inputs>
<form name="F1"> <! gives the form a name so it can be referenced by the java script>
a: <! text in front of input a>
<! adds a space after a:>
<! adds another space>
<input
type = "text"
name = "a"
value = "12"
size = "4"
/> <! creates input a>
<! makes input a a text box>
<! names input a a>
<! sets the initial value of input a>
<! sets the size of input a>
<! ends the seting for input a>
<br /> <! move to next line>
b:
<input
type = "text"
name = "b"
value = "100"
size = "4"
/>
<br />
<br />
<b> Solution to a + b: </b>
<br />
<br />
Output:
<input
type = "text"
name = "out"
value = ""
size = "10"
/>
<br />
<br />
<input
type = "button"
value = "Calculate"
onClick = "clickButton1()"
> <! Creates a button and assigns its properties>
</form> <! end of form-F1>
<script
type ="text/javascript"> // starts the imbedded javascript
// comments look like this in java script
function clickButton1()
{
var a = document.F1.a.value; //sets variable a = the contents of input/textbox a
a = parseFloat(a); // convers a from a string to a floating number
var b = document.F1.b.value;
b = parseFloat(b);
var c = a + b;
document.F1.out.value = c;
}
</script> <! ends the script section of the file>
</html>
<! This program has embedded java scripts to solve an equation with certain inputs>
<form name="F1"> <! gives the form a name so it can be referenced by the java script>
a: <! text in front of input a>
<! adds a space after a:>
<! adds another space>
<input
type = "text"
name = "a"
value = "12"
size = "4"
/> <! creates input a>
<! makes input a a text box>
<! names input a a>
<! sets the initial value of input a>
<! sets the size of input a>
<! ends the seting for input a>
<br /> <! move to next line>
b:
<input
type = "text"
name = "b"
value = "100"
size = "4"
/>
<br />
<br />
<b> Solution to a + b: </b>
<br />
<br />
Output:
<input
type = "text"
name = "out"
value = ""
size = "10"
/>
<br />
<br />
<input
type = "button"
value = "Calculate"
onClick = "clickButton1()"
> <! Creates a button and assigns its properties>
</form> <! end of form-F1>
<script
type ="text/javascript"> // starts the imbedded javascript
// comments look like this in java script
function clickButton1()
{
var a = document.F1.a.value; //sets variable a = the contents of input/textbox a
a = parseFloat(a); // convers a from a string to a floating number
var b = document.F1.b.value;
b = parseFloat(b);
var c = a + b;
document.F1.out.value = c;
}
</script> <! ends the script section of the file>
</html>
----------------------------------------------------------
