Sum the result of functions by clicking a button

This site is best viewed in a modern browser with JavaScript enabled.

Sum the result of functions by clicking a button

phant

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:

<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

Post the HTML code as well.

phant

Sorry, here you go:

	<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

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

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>
<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

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

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

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

JS:

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

HTML:

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

phant

Hi Ryan,

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

JS:

<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:

<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

&#8364; [object HTMLDivElement]

Can you see what's going wrong?

Thanks a million for your help!!
Jerry

ryanbutler

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.