Sum the result of functions by clicking a button

**phant** · 03-10-2010 09:56 AM

Hi,

Sorry for the vague title, but I have 2 javascript functions that display the value that was set on one of the options in a form selection box. Now I want to add a third function that will sum the values from the user's selections by pressing a button.

The code from the first part is this:

Code:

<script type="text/javascript">
window.onload=function(a,b)
{
	value=document.getElementById('value1'),
	combobox=document.getElementById('1');
	
	combobox.onchange=function(a)
	{
	document.getElementById('value1').innerHTML = "&euro; " +this.value;
	var r = this.value;
	}

	value2=document.getElementById('value2'), 
	combobox2=document.getElementById('2');
	
	combobox2.onchange=function(b)
	{
	document.getElementById('value2').innerHTML = "&euro; " +this.value;
	var q = this.value;
	}
}
</script>

So in a div with id value1 and a div with id value 2 the values from the user's selection will appear. No I'm trying to get a function to sum both values by clicking a button.

Whatever I try, nothing seems to work. Any help would be highly appreciated. Many thanks in advance!

Jerry

**Kor** · 03-10-2010 10:19 AM

Post the HTML code as well.

**phant** · 03-10-2010 10:21 AM

Sorry, here you go:

HTML Code:

	<fieldset class="cf-fs1"> 
		<legend>top</legend> 
		<ol> 
			<li><label><span>First</span></label>
            <select name="1" id="1"> 
				<option value="1">Summer</option> 
				<option value="2">Spring</option> 
			</select></li> 
		</ol> 
        
        <ol> 
			<li><label><span>Second</span></label>
            <select name="2" id="2"> 
				<option value="1">Summer</option> 
				<option value="2">Spring</option> 
				<option value="3">Pink</option> 
				<option value="4">Corporate</option> 
			</select></li> 
		</ol> </fieldset> 
        <div id="value1">here 1</div>
        <div id="value2">here 2</div>

**Kor** · 03-10-2010 10:28 AM

At a first glance: id can not start with a digit.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".") - W3C Recommendation - http://www.w3.org/TR/html4/types.html

**phant** · 03-10-2010 10:56 AM

Thanks Kor! I've changed the name and ID tags. The problem is that I don't know how to write a function that sums the values and presents a total when you press a button. Would you be able to help me with that?

The full code I have now is this:

HTML Code:

<html>
<head>
</head>
<script type="text/javascript">
window.onload=function(a,b)
{
	value=document.getElementById('value1'),
	combobox=document.getElementById('first');
	
	combobox.onchange=function(a)
	{
	document.getElementById('value1').innerHTML = "&euro; " +this.value;
	}

	value2=document.getElementById('value2'), 
	combobox2=document.getElementById('second');
	
	combobox2.onchange=function(b)
	{
	document.getElementById('value2').innerHTML = "&euro; " +this.value;
	}
}
</script>
<body>
	<ol> 
			<li><label><span>First</span></label>
            <select name="1" id="first"> 
				<option value="1">Summer</option> 
				<option value="2">Spring</option> 
			</select></li> 
		</ol>       
        <ol> 
			<li><label><span>Second</span></label>
            <select name="2" id="second"> 
				<option value="1">Summer</option> 
				<option value="2">Spring</option> 
				<option value="3">Pink</option> 
				<option value="4">Corporate</option> 
			</select></li> 
		</ol>
        <div id="value1">here 1</div>
        <div id="value2">here 2</div>
</body>
</html>

Thanks.
Jerry

**phant** · 03-10-2010 02:26 PM

What the current script does is displaying the value that belongs to option that the user selects.

The code above wil display 2 numbers. The top number will be either 1 or 2 and the bottom number can range from 1 to 4. This is what I want it to do.

But I also want to sum those 2 selections and display a total. And I just can't figure out how to do this.
Would anybody be able to help me with this? Your help is highly appreciated! Many thanks!

Jerry

**ryanbutler** · 03-10-2010 03:10 PM

Create another DIV with an ID of summation, create another variable, sum, and then set it equal to the result of the value 1 and 2 added together.

**phant** · 03-10-2010 03:22 PM

Hi ryan,
Thanks for your help. Would you be able to show me how to put that into code? I'm not sure how to create a variable that is equal to the result of the user's selection for value 1 and 2.

Jerry

**ryanbutler** · 03-10-2010 03:55 PM

JS:

Code:

var sum;
sum=value + value2;
document.getElementById('sum').innerHTML = "&euro; " +this.value;

HTML:

Code:

<div id="sum">&nbsp;</div>

**phant** · 03-10-2010 04:21 PM

Hi Ryan,

I don't get it to work. This is what i have now:

JS:

Code:

<script type="text/javascript">
window.onload=function(a,b)
{
	value=document.getElementById('value1'),
	combobox=document.getElementById('first');
	
	combobox.onchange=function(a)
	{
	document.getElementById('value1').innerHTML = "&euro; " +this.value;
	}

	value2=document.getElementById('value2'), 
	combobox2=document.getElementById('second');
	
	combobox2.onchange=function(b)
	{
	document.getElementById('value2').innerHTML = "&euro; " +this.value;
	}
}
function changeText(){
var sum;	
sum=value + value2;
document.getElementById('sum').innerHTML = "&euro; " +this.value;
}
</script>

HTML:

HTML Code:

<ol> 
			<li><label><span>First</span></label>
            <select name="1" id="first"> 
				<option value="0">Please select...</option>
                <option value="1">Summer</option> 
				<option value="2">Spring</option> 
			</select></li> 
		</ol>       
        <ol> 
			<li><label><span>Second</span></label>
            <select name="2" id="second">
				<option value="0">Please select...</option> 
				<option value="1">Summer</option> 
				<option value="2">Spring</option> 
				<option value="3">Pink</option> 
				<option value="4">Corporate</option> 
			</select></li> 
		</ol>
        <div id="value1">5</div>
        <div id="value2">5</div>
        <input type='button' onclick='changeText()' value='Change Text'/>
        <div id="sum"></div>

But the output i get is

Code:

€ [object HTMLDivElement]

Can you see what's going wrong?

Thanks a million for your help!!
Jerry

**ryanbutler** · 03-11-2010 08:04 AM

Yes, I thought you meant you wanted the summation to occur all within the same function (window.load). Right now, value and value2 are only in scope to the window.load function. Either place the summation code in there or make the value and value2 variable global in code.

Thread: Sum the result of functions by clicking a button

Thread Tools

Display

Sum the result of functions by clicking a button

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions