Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

SIMPLE Arithmetic 1

Status
Not open for further replies.
Chinyere

Chinyere

Programmer
Mar 9, 2001
79
US
Hello,

Does anyone know how to do simple arithmetic in Javascript?

Such as: a + b = c
a - b= c
a * b = c

...with totals displayed for each on a Web site?

If not, could you direct me to the right thread or Web site? (I am crunching on a project and can't think of where I've found this before...)

Thanks.

Chinyere [afro2]
 
Sort by date Sort by votes
Here's an example:

Code: 
<html>
<head>
<script language="javascript">
<!--
function calcVals(int1, int2) {
    var the_sum = int1 + int2;
    var the_diff = int1 - int2;
    var the_prod = int1 * int2;

    document.getElementById('add').innerHTML = the_sum;
    document.getElementById('sub').innerHTML = the_diff;
    document.getElementById('mul').innerHTML = the_prod;
}
-->
</script>
</head>
<div id="add">Sum: </div>
<div id="sub">Difference: </div>
<div id="mul">Product: </div>
<form name="frm">
<input type="button" value="Do Calcs With 3 and 2" onclick="calcVals(3, 2);">
</form>
<body>
</body>
</html>

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
Thank you! I will try this out. I have to admit that I am a TOTAL Javascript novice so I may come back with questions...

Chinyere [afro2]
 
Upvote 0 Downvote
cLFlaVA,

I actually do have a question:

I would like the user to be able to enter in any two values and then perform any operation...

Is this possible with the code above or do they have to use just "3" and "2?" Thanks.

Chinyere [afro2]
 
Upvote 0 Downvote
It's of course very possible.
You'll need to make two textboxes within your form.

Then, when you click the button, instead of passing 3 and 2, pass document.formname.textboxname.value and document.formname.othertextboxname.value. Also, make sure that you test for invalid entries, such as spaces, characters, commas, periods, etc.

You can find a lot of those answers in the FAQ section of this forum.

HTH.

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
cLFlaVA,

I hat to keep bugging you... BUT...

This is what I ave so far, does it look good to you? Also, how do I display the totals???

Code: 
<HEAD>
	
	<script language="javascript">
<!--
function calcVals(int1, int2) {
    var the_sum = int1 + int2;
    var the_diff = int1 - int2;
    var the_prod = int1 * int2;
    document.getElementById('add').innerHTML = the_sum;
    document.getElementById('sub').innerHTML = the_diff;
    document.getElementById('mul').innerHTML = the_prod;
}
-->
</script>


<div id="mul">Product: </div>

<form name="myform">

<input type=text name="data1" size=10> * <input type=text name="data2" size=10>

<input type="button" value="Calculate Results" onclick="calcVals(document.myform.data1.value, document.myform.data2.value);">
</form>

Could you possibly write a simple code with concrete examples for multiplication ONLY? I will then substitute for division, addition and subtraction...

When I try to do this it doesn't work and I am really pressed for time.

That would be a great help!

Thanks!

Chinyere [afro2]
 
Upvote 0 Downvote

Chinyere-

Try this:

Code: 
<html>
<head>
<script language="javascript">
<!--
function calcVals() {
    var int1 = document.myform.data1.value;
    var int2 = document.myform.data2.value;
    var the_prod = int1 * int2;
    document.getElementById('ans').innerHTML = the_prod;
}
-->
</script>
</head>

<body>
<div id="mul">Product: </div>

<form name="myform">

<input type=text name="data1" size=10> * <input type=text name="data2" size=10> = <span id="ans"></span>
<br><br>
<input type="button" value="Calculate Results" onclick="calcVals();">
</form>
</body>
</html>

Just remember that an error will result if the value inside the textbox is not numeric.

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
Thank you so very much cLFlaVA!!!

On another note:

I would like to use the calculator on this page:


Code: 
<!-- TWO STEPS TO INSTALL 5 FUNCTION CALCULATOR:

   1.  Paste the coding into the HEAD of your HTML document
   2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Copy this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Rick Johnson -->
<!-- Web Site:  [URL unfurl="true"]http://members.tripod.com/~RickJohnson[/URL] -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [URL unfurl="true"]http://javascript.internet.com[/URL] -->

<!-- Begin
function a_plus_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.ans.value = c
}
function a_minus_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.ans.value=c
}
function a_times_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.ans.value=c
}
function a_div_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.ans.value = c
}
function a_pow_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.ans.value = c
}
// End -->
</SCRIPT>

<!-- STEP TWO: Put this code into the BODY of your HTML document  -->

<BODY>
<CENTER>
<FORM name="formx"><input type=text size=4 value=12 name="a"> 
<input type="button" value="  +  " onClick="a_plus_b(this.form)">  
<input type="button" value="  -  " onClick="a_minus_b(this.form)">  
<input type="button" value="  x  " onClick="a_times_b(this.form)">  
<input type="button" value="  /  " onClick="a_div_b(this.form)">  
<input type="button" value="  ^  " onClick="a_pow_b(this.form)">  
<input type="number" size=4 value=3 name="b"> = <input type "number" value=0 name="ans" size=9>
</FORM>
</CENTER>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="[URL unfurl="true"]http://javascriptsource.com">The[/URL] JavaScript Source</a></font>
</center><p>

<!-- Script Size:  1.72 KB  -->

...and I am trying to do both multiplication and division on the same Web page. The multiplication works but the division doesn't... : (

I am simply trying to divide the answer received from the mutiplication by 1,000 and it won't work, I've tried changing the "a" and "b" to "d" and "e" and still nothing...

Any help here? I PROMISE that this will be my last question AND you will definitely voted for TIPMASTER of the WEEK!!!

Thanks!

Chinyere [afro2]
 
Upvote 0 Downvote
That EXACT code doesn't work for you?

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
cLFlaVA,

The exact code does work for me. I am just trying to do multiplication first and then divide the result by 1,000.

Am I asking for two much? I guess I need two forms but I don't know how to proceed...

Chinyere [afro2]
 
Upvote 0 Downvote
Well, just make your formula as follows:

Code: 
<html>
<head>
<script language="javascript">
<!--
function calcVals() {
    var int1 = document.myform.data1.value;
    var int2 = document.myform.data2.value;
    var the_prod = (int1 * int2) / 1000;
    document.getElementById('ans').innerHTML = the_prod;
}
-->
</script>
</head>

<body>
<div id="mul">Product: </div>

<form name="myform">

<input type=text name="data1" size=10> * <input type=text name="data2" size=10> = <span id="ans"></span>
<br><br>
<input type="button" value="Calculate Results" onclick="calcVals();">
</form>
</body>
</html>

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
cLFlaVA,

Thank you so much for all of your help. I shall try this tomorrow...

Chinyere [afro2]
 
Upvote 0 Downvote
cLFlaVA,

I plugged the code into my HTML editor and it worked great...

The only thing is that I want the multiplication and division to happen in two stages. That is, I want them to see their answer first after multiplying then their answer after division...

Could you break it down into two stages?

Thanks!
Chinyere [afro2]

PS This WILL BE the LAST question. ; )...promise
 
Upvote 0 Downvote
Like, two separate buttons, one with multiply and one with divide by 1000?

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
cLFlaVA,

Yes.

1) The first part will have the person enter two numbers and multiply then they get to see the result.

2) Then the second part will have two fields with the first field containing the answer from part one, then divided that (first) result by 1,000. That is, when the user clicks the submit button, it will perform the operation of dividing the result from part 1 by 1,000.

Your code worked, we just need to see the "process."

(I will also use this code to perform different operations such as addition and subtraction but I think that if you do this two-step code that I will be able to substitute...)

Thanks so much for all your help!

Chinyere [afro2]
 
Upvote 0 Downvote
This should show you...

Code: 
<html>
<head>
<script language="javascript">
<!--
function multiply() {
    var int1 = document.myform.data1.value;
    var int2 = document.myform.data2.value;
    var the_prod = int1 * int2;
    document.myform.product.value = the_prod;
}

function divide() {
    var divisor = document.myform.product.value;
	var dividend = document.myform.dividend.value;

    var quotient = divisor / dividend;

	document.myform.quotient.value = quotient;
}
-->
</script>
</head>

<body>
<div id="mul">Product: </div>

<form name="myform">
<pre>
  <input type="text" name="data1" size="10" style="text-align: right">
* <input type="text" name="data2" size="10" style="text-align: right"> <input type="button" value="Multiply" onclick="multiply();">
-------------
  <input type="text" name="product" size="10" style="text-align: right">
&#247; <input type="text" name="dividend" size="10" style="text-align: right"> <input type="button" value="Divide" onclick="divide();">
-------------
  <input type="text" name="quotient" size="10" style="text-align: right">
</pre>
</form>
</body>
</html>

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
Hi,

Unfortunately, this one did not work for me... : (.

Would it be possible to see the result for each part?

So, for example,

1) 100 * 3 = 300

2) 300 / 1000 = .3

The result (answer) from part 1 doesn't necessarily have to carry down to part 2. I could have the user automatically enter it.

Thanks!

Chinyere [afro2]
 
Upvote 0 Downvote
That code works.

In the top two text boxes, enter the numbers you'd like to multiply. Then click Multiply. The answer will display in the third box down.

Then, in the fourth box, enter 1000. Click Divide. The fifth box will have the answer in it.

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
I did check and re-check but let me try it again... Thanks!

Chinyere [afro2]
 
Upvote 0 Downvote
cLFlaVA,

I tried it again and it is still not working for me... : (

See, I entered this code on the following page (URL):


You could go there and test it yourself (also try a view source) so that you will see that I have enterered it in exactly as you said.

Thanks!

Chinyere [afro2]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JPSeo
  • Locked
  • Question
simple SyntaxError: missing ) after argument list error
Replies
2
Views
120
JPSeo
JPSeo
GOSCO
  • Locked
  • Question
Help with simple JQuery Plugin issue news ticker
Replies
1
Views
78
1DMF
1DMF
JASONHEADSETSDOTCOM
  • Locked
  • Question
Simple HTML with automatic image refresh
Replies
4
Views
92
feherke
feherke
katie4335
  • Locked
  • Question
simple javascript postmatch not working
Replies
6
Views
68
katie4335
katie4335
Ramones1986
  • Locked
  • Question
Problems with a simple Object Oriented Code - Result not Showing Up
Replies
3
Views
62
jpadie
jpadie

Part and Inventory Search

Sponsor

Back
Top