Adding to Variable on Condition in JavaScript [Archive]

zxblcanterx

01-24-2015, 08:05 AM

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.

$('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.

$('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

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

jscheuer1

01-25-2015, 04:49 AM

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