HTML / Javascript equation solver
Posted on Sunday, August 28, 2011, 3:43 PM
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:
-------------------------------------------------------
<! 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>
----------------------------------------------------------
Subscribe to:
Post Comments (Atom)
4 Response to "HTML / Javascript equation solver"
Didn't work on my phone :( Have to try it again at work tomorrow.
--Dave
Hope it works. I like this platform because it is simple and anyone can do it if they have a browser. I feel like this is a good way it introduce programing to new students. My first programing class was using Java, but I never knew how it really worked. I wrote some code I sort of understood then the compiler did some magic and it worked or didn't work.
Sorry, I will look into why this is not working and update it. It did work at one point and the code above should be at least close to get someone started. :) -- to Michael. I agree. My first programing class was java as well and it was very confusing how it all worked. Using something simple like a test file and you internet browser really makes the coding "real" to a new programmer.
aha! It is fixed now. The first line: form name="F1", was missing.
Leave A Reply