Add (or multiply, subtract or divide) one var to another in JS/jQuery

Question

Sincere apologies if this has been asked and answered elsewhere, I struggled with finding accurate search terms for this.

Working in jQuery I have a var called total . I need to add the value of other vars to total . All the vars in question have numerical values.

This is what I've tried:

var total = total+rocketspend;
$(".totalamount").html(total);

and

var newtotal = total+rocketspend;
var total = newtotal;
$(".totalamount").html(total);

Both have resulted in .totalamount being emptied and replaced with nothing. I have theories around why this might be going wrong - it could be that in the first example a var isn't allowed to be self defining, and it could be that in in the second example the browser attempts to define both newtotal and total at the same time, ending in mystery. Or it could be something else entirely. The rocketspend var works fine on its own, as does total before the attempted addition.

Thoughts?

Answer 1

You only need to use var when you first define a variable. It looks like you're trying to access a variable that already exists. Example:

var total = 0;
var rocketspend = 10;

total = total + rocketspend;
$(".totalamount").html(total);

Additionally, try checking your console for any errors. In most browsers, you can right click and inspect an element or click Ctrl + Shift + I and clicking on the Console tab. You can use Ctrl + Shift + K in Firefox.

Answer 2

You are using jQuery and have referenced an element (ie .totalamount ) so assuming you are using normal webpage (ie HTML, CSS, JS/jQ etc..), this Snippet has 2 <forms> . The first one uses only JavaScript and HTML5. The second form uses jQuery and HTML5.

When using form fields such as <input> , the value you type in them will be a string (ie text) value. So when "3" is typed in, the <input> will treat it as text not a real number value. So convert the string to a number, use parseFloat() , parseInt() , or Number() .

To get <input> values use .val() (jQuery) or .value (JavaScript).

SNIPPET

 $('#calc1').on('input', function() { var rocket1 = $('#rocket1').val(); var sub1 = $('#sub1').val(); var total1 = parseFloat(sub1) + parseFloat(rocket1); $("#total1").val(total1); }); 

 input {width: 8ex;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Using only plain JavaScript and HTML5 form fields</p> <form id="calc" name="calc" oninput="total.value = parseFloat(sub.value, 10) + parseFloat(rocket.value, 10)"> <fieldset> <legend>Rocket Expenditure</legend> <label for="sub"> <b>Sub Total:</b> <input type="number" id="sub" name="sub" value="0"> </label>&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp; <label for="rocket"> <b>Rocket:</b> <input type="number" id="rocket" name="rocket" value="0"> </label> <label> <b>Total:</b> <output name="total" for="sub rocket">0</output> </label> </fieldset> </form> <p>Using jQuery and HTML5 form fields</p> <form id="calc1" name="calc1"> <fieldset> <legend>Rocket Expenditure 1</legend> <label for="sub1"> <b>Sub Total 1:</b> <input type="number" id="sub1" name="sub1" value="0"> </label>&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp; <label for="rocket1"> <b>Rocket 1:</b> <input type="number" id="rocket1" name="rocket1" value="0"> </label> <label> <b>Total 1:</b> <output id="total1" name="total1" for="sub1 rocket1">0</output> </label> </fieldset> </form>