www.webdeveloper.com
Results 1 to 11 of 11

Thread: Sum the result of functions by clicking a button

  1. #1
    Join Date
    Mar 2010
    Posts
    6

    Sum the result of functions by clicking a button

    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

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  3. #3
    Join Date
    Mar 2010
    Posts
    6
    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>

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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

  5. #5
    Join Date
    Mar 2010
    Posts
    6
    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

  6. #6
    Join Date
    Mar 2010
    Posts
    6
    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

  7. #7
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    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.
    Ryan Butler

    Ryan Butler.org

  8. #8
    Join Date
    Mar 2010
    Posts
    6
    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

  9. #9
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    JS:

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

    Code:
    <div id="sum">&nbsp;</div>
    Ryan Butler

    Ryan Butler.org

  10. #10
    Join Date
    Mar 2010
    Posts
    6
    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

  11. #11
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    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.
    Ryan Butler

    Ryan Butler.org

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles