Question
Hi, All.
I want to add a calculator program to my web site.
The formula is:
(A) X (B) X (C) X (D) = E
What I would like to allow visitors to do is select the values of A,B,C,D from drop down lists and it would calculate it to give them E.
Any suggestion on how to do it?
Thanks.
Mike.
Answer
Just zipping through, but one of these might be helpful.
There's an advanced one about 1/2 way down, unfortunately, I didn't have time to 'play' with it.
http://javascript.internet.com/calculators/
Answer
http://miplet.com/calc.html
Of couse the body tag should have no spaces.
HTML Code:
<html>
<head><title>test</title></head>
<b o d y>
<form name="calc">
<select name="a" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select name="b" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select name="c" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select name="d" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type=button value="update" onclick="document.calc.e.value =
document.calc.a.value*
document.calc.b.value*
document.calc.c.value*
document.calc.d.value" >
<input name="e" type="text" value="1">
</form>
</body>
</html>
Answer
OH GOD, ALGERBRA IS BACK!
Ahhhhhhh
Answer
Thanks, Kathleen, I'll check it out.
Miplet, what can I say,... I see it, I believe it, I've even been to your site and done it, but I do not understand it... Where is the multiplication database? Where are my beloved 'If/then' and 'goto' statements?
(I learned programming back when we were still using an IBM keypunch unit and a reader/hopper)
I've read the script you provided but do not see the instruction steps and command lines I was once familiar with.
Anyway, it is exactly what I was wanting, I appreciate that.
Can you tell me how I would go about labeling each dropdown header to identify what each drop down column represents? Like; column a=airplanes, b=busses, c=cars, d=trucks, etc, etc? I would also like for a "X" to appear between each dropdown column to show the visitor that the values are being multiplied, if you would kindly show me how to make that appear too.
Thanks so much.
What I am learning most right now is how much I don't know.
Mike.
Answer
Me add comments to any of my programs..... I'm so bad at that. I'm heading out soon, so I cant add them till tonight when I get home.
Answer
Ok, so I can't wait.....
HTML Code:
<html>
<head>
<title>test</title>
</head>
<b o d y>
<form name="calc">
<table cellspacing=0 cellpadding=0 border=0><tr><td valign="bottom">
<select name="a" size="1" onclick="document.calc.e.value = document.calc.a.value* document.calc.b.value* document.calc.c.value* document.calc.d.value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
airplanes</td><td valign="bottom"> X
</td><td valign="bottom">
<select name="b" size="1" onclick="document.calc.e.value = document.calc.a.value* document.calc.b.value* document.calc.c.value* document.calc.d.value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
buses</td><td valign="bottom"> X
</td><td valign="bottom">
<select name="c" size="1" onclick="document.calc.e.value = document.calc.a.value* document.calc.b.value* document.calc.c.value* document.calc.d.value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
cars</td><td valign="bottom"> X
</td><td valign="bottom">
<select name="d" size="1" onclick="document.calc.e.value = document.calc.a.value* document.calc.b.value* document.calc.c.value* document.calc.d.value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
trucks</td><td valign="bottom"> =
</td><td valign="bottom">
<input name="e" type="text" value="1" maxlength="5">
Total Vehicles
</td></tr></table>
</form>
</body>
</html>
I took out the "update" button simply because I couldn't find a good place to put it.
I added the table to help it line up better in smaller browser windows.
The
Code:
means simply non-breaking space--IOW, don't break a line here.
For colors, fonts, etc...you're on your own.
And.....I wasn't sure if you were talking tongue in cheek or not...but this isn't so different from what you're used to looking at.
Same principles, different format.
When the web browser interpretes a page, it sets up variables on it's own.
The whole window is "document".
Each element is named according to the "name=" value in the tag. (There are default values that it uses if the name isn't there.)
It also has predefined functions like "calc", which converts to a number.
It uses the "." notation to define general to specific--think containters inside containers. "document" being the biggest containter.
so document.calc.b.value means the value of the object named "b" inside the object named "document".
The "*" is the multiplication function.
Simple, really. You just gotta get used to looking at it that way.
Answer
if your site will support PHP, it would be simple.