Results 1 to 2 of 2

Thread: Adding to Variable on Condition in JavaScript

  1. #1
    Join Date
    Jan 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Adding to Variable on Condition in JavaScript

    I have a variable called "total" that I would like to assign a number (or price) to and then add to that number when certain options are selected or checked. Here is the code I have so far.

    Here is the code that sets the initial value (base price) of the variable that will be added to. THIS CODE CURRENTLY WORKS.
    Code:
    $('input[name=trimlevel]').change(function(){
    	
    	  var total = 0;
    	  
    	  if(document.getElementById('basetrim').checked==true) {
    			  
    			  var total = 0;
    			  var basetrim = 3550.00;
    			  total = total + basetrim;
    			  $('#myTotal').html('$' + total);
    			  
    	  }else if(document.getElementById('upgrade').checked==true) {
    		    	  var total = 0; 
    			  var upgrade = 2400.00;
    			  total = total + upgrade;
    			  $('#myTotal').html('$' + total);
    			 
    			  
    	   }else {
    		     $('#myTotal').html('$' + total);
    		   }
    		
    	  
    	});

    Here is an example of the code used to "add to" the value of the variable. THIS IS NOT WORKING.

    Code:
    $('input[name=leather]').change(function(){
    		  
    	  if(document.getElementById('leather).checked == true) {
    			 var leather = 180.00;
    			 total = total + leather;
         		 $('#myTotal').html('$' + total);
    	  }
    });

    Here is the HTML for reference

    HTML Code:
    <div class="modelsel">
               <h2>1. SELECT MODEL</h2> <br>
               <label for="basetrim">BASE MODEL</label> 
               <input id="basetrim" type="radio" name="trimlevel" value="2400.00">
               <label for="upgrade">UPGRADED MODEL</label> 
               <input id="upgrade" type="radio" name="trimlevel" value="3550.00">
               
     </div>
    
    <div class="inside">
              <h2>3. BASE MODEL ADD-ONS</h2><br>
              <input type="checkbox" value="180.00" id="leather" name="leather" />
               <label for="leather">Leather Seat (+ $180.00)</label><br>
    </div>
    
    <div id="myTotal"></div>
    I am relatively new to Javascript and have been struggling with this for hours. Any help is appreciated. Thanks in advance.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var levels = $('input[name=trimlevel]');
    	var leatherbox = $('#leather');
    	var totdiv = $('#myTotal');
    
    	levels.change(function(){
    		if(this.checked) {totdiv.html('$' + this.value);}
    		if(leatherbox.get(0).checked) {leatherbox.trigger('change');}	  
    	});
    
    	leatherbox.change(function(){
    		if(!levels.filter(':checked').length){return;}
    		var total = +totdiv.html().substring(1);
    		if(this.checked) {total += +this.value;}
    		else {total -= this.value;}
    		totdiv.html('$' + total.toFixed(2));
    	});
    });
    </script>
    </head>
    <body>
    <div class="modelsel">
               <h2>1. SELECT MODEL</h2> <br>
               <label for="basetrim">BASE MODEL</label> 
               <input id="basetrim" type="radio" name="trimlevel" value="2400.00">
               <label for="upgrade">UPGRADED MODEL</label> 
               <input id="upgrade" type="radio" name="trimlevel" value="3550.00">
               
     </div>
    
    <div class="inside">
              <h2>3. BASE MODEL ADD-ONS</h2><br>
              <input type="checkbox" value="180.00" id="leather" name="leather" />
               <label for="leather">Leather Seat (+ $180.00)</label><br>
    </div>
    <br>
    <div id="myTotal">$0.00</div>
    </body>
    </html>
    Last edited by jscheuer1; 01-25-2015 at 08:58 PM. Reason: minor improvements
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Looping and adding a variable number
    By croberts in forum JavaScript
    Replies: 2
    Last Post: 07-16-2012, 07:20 AM
  2. Replies: 7
    Last Post: 06-13-2011, 07:18 AM
  3. Resolved Adding A Variable in a PHP Redirect
    By arsenalbates in forum PHP
    Replies: 4
    Last Post: 12-28-2010, 12:44 PM
  4. JavaScript condition question
    By dukevn in forum JavaScript
    Replies: 4
    Last Post: 07-18-2008, 06:48 PM

Bookmarks

Posting Permissions

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