Multiplying values with JavaScript

Using JavaScript I want to multiply two values (from a drop down list) to give me a total, ie:

10 * 30 = 300

I don’t want an extra calculate button

Does anyone know the javascript to carry out this task?

I’d be greatfull for your help.

<html><head><title>Total</title></head><body>
<form>
Height:
<select name="height">
  <option>10</option>
  <option>20</option>
  <option>30</option>
  <option>40</option>
  <option>50</option>
  <option>60</option>
  <option>70</option>
  <option>80</option>
  <option>90</option>
  <option>100</option>
</select>
  &nbsp;&nbsp;
* Length:
<select name="length">
  <option>10</option>
  <option>20</option>
  <option>30</option>
  <option>40</option>
  <option>50</option>
  <option>60</option>
  <option>70</option>
  <option>80</option>
  <option>90</option>
  <option>100</option>
</select>
&nbsp;&nbsp;

= Total:&nbsp;&nbsp; 100

</form>
</body></html>

Thankyou

You can attach an onchange event to the last select:

<select name="length" onchange="calculate();">

Thankyou for your reply moltar.
Unfortunatly I’m really new to Javascript, so not sure what an “onchange” event does or how to code it.

Was hoping someone could show me the way, or least direct me to a good (and simple) JS site.

Thankyou again

at the first, create calculate function. for examlpe, some thing like this:

function calculate()
{
var h = document.getElementsByName('height').value; //get the value of selected height
var l = document.getElementsByName('length').value; //get the value of selected length
var result = h * l; // do, any thing you want to do, and make the Result
////// for example, show the result in a message box!
alert (result);
///// Or show it in a Lable (or any thing else!)
document.getElementsByName('lblResult').innerHTML = result;
return (result); // return The calculated Result
}

now, call it in onchange event of select elements:

<select name="length" onchange="calculate();">
  ....
</select>

<select name="height" onchange="calculate();">
  ....
</select>

This events, fires evry time user make a selection, and change the selected Item. so, every time you have change in selected values, you have change in result!

Hope it helps :wink:

Thankyou for that code return (0)

I placed it in, but I get a little alert notice saying “NaN” and it no multiplication takes place :frowning:

It’s probably something minor that needs tweaking or adding too, but alas the little I know of JavaScript doesn’t go that far :frowning:

Could I impose upon you or someone else once again, and ask for your help.

Many thanks and sorry for all this.

Yes, you need to use parseInt() function to convert the values into integers. By default they are treated as text. And it’s impossible to multiply text, that’s why you get NaN (Not a Number).

var result = parseInt(h) * parseInt(l);

Thankyou Moltar
I know this is really blonde of me, but where exactly in the code do I place the “var result = parseInt(h) * parseInt(l);” ?

(yep am feeling like a right numskull :frowning: )

Sorry for incompleteness of my code!
moltar is right. the returned value from “document.getElementsByName(‘height’).value” and “document.getElementsByName(‘length’).value” is a text value and you can’t multiple or add, or generally, do any mathematical calculation on some text value (its clear!).
you should replace “var result = parseInt(h) * parseInt(l);
by the following line in my code:

var result = h * l; // do, any thing you want to do, and make the Result

Stay Happy… :slight_smile:

return(0) thankyou.
The Nan notice doesn’t appear anymore, but I still don’t get a result :frowning:
Could one of you guys be so kind as to test the whole thing in a html page, to see if it’s not me messing something up please.
Once again my thanks and apologies too.

there was some problem!
you shuold set the value attribute of any option of the select boxes!
without setting value of options, when we use “document.getElementById(‘height’).value;” the returned value, is nothing!
however, you can copy and past following code, and be sure that it will work :wink:
trust me :cool:


<html>
<head>
	<script language="javascript">
		function Calculate()
		{
			var h = document.getElementById('height').value;
			var l = document.getElementById('length').value;
			var result = h * l;
			document.getElementById('lblRes').innerHTML = result;
		}
	</script>

</head>
	<body>
		<div align="center">
		<form>
			Height:
			<select Id="height" onChange="Calculate();">
			  <option value=10>10</option>
			  <option value=20>20</option>
			  <option value=30>30</option>
			  <option value=40>40</option>
			  <option value=50>50</option>
			  <option value=60>60</option>
			  <option value=70>70</option>
			  <option value=80>80</option>
			  <option value=90>90</option>
			  <option value=100>100</option>
			</select>
			  &nbsp;&nbsp;
			* &nbsp;
			Length:
			<select Id="length" onChange="Calculate();">
			  <option value=10>10</option>
			  <option value=20>20</option>
			  <option value=30>30</option>
			  <option value=40>40</option>
			  <option value=50>50</option>
			  <option value=60>60</option>
			  <option value=70>70</option>
			  <option value=80>80</option>
			  <option value=90>90</option>
			  <option value=100>100</option>
			</select>
			&nbsp;&nbsp;
			
			= Total:&nbsp;&nbsp;
			<label id="lblRes"> <!-- a Label to locate result in it -->
			 100
			</label>
			
		</form>
		</div>
	</body>
</html>

stay happy :slight_smile:

return(0) Thankyou so much, it works great. :slight_smile:

My Many thanks to yourself and moltar too