0

Javascript Adding up newly created text values

I am trying to create a page where a user can add as many text boxes as they want and then hit the total expenses button to see what the sum of all the textbox values equal. Im not sure what I am doing wrong though each time I hit the total expense button the value is always 0. Please help!

8th May 2018, 10:28 PM
Jordan S Reynolds
Jordan S Reynolds - avatar
7 odpowiedzi
+ 2
Please post your code here so we may be able to see where the issue is.
8th May 2018, 11:07 PM
Ulisses Cruz
Ulisses Cruz - avatar
9th May 2018, 1:21 PM
Ulisses Cruz
Ulisses Cruz - avatar
0
oops sorry about that, here it is: <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <input type="button" value="Add Expense" onclick="add_expense()"/><br /> <div id="box"></div> <input type="button" value="Total Expenses" onclick="calc_expense()"/><br /> <input type="text" id="net_exp"/> </body> </html> Javascript: var x=-1; var all_exp=0; function add_expense(){ x+=1; $('#box').append("<input type='text' placeholder='Amount' class='e'/><br />e"+x+"<br /><br /><br />"); all_exp = +$('.e')[x].value; } function calc_expense(){ $('#net_exp').val(all_exp); }
9th May 2018, 3:39 AM
Jordan S Reynolds
Jordan S Reynolds - avatar
0
Ok test 1 The problem in your code is that you are getting the value of the expenses inside function add_expense. What happens is that you creates an input field and grab its value imediately. BUT at that point the user did not insert anything yet. The solution would be to grab the value of expenses inside calc_expenses like this: function calc_expenses(){ $('.e').each(function(){ all_exp += parseInt($(this).val()); }); $('#net_exp').val(all_exp); } The line: all_exp = + $('.e')[x].value; should be removed. it is not needed. If you do this changes it should work.
9th May 2018, 10:01 AM
Ulisses Cruz
Ulisses Cruz - avatar
0
hmm I changed it but now #net_exp doesn't show any value whenever, calc_expenses is called... any ideas?
9th May 2018, 12:28 PM
Jordan S Reynolds
Jordan S Reynolds - avatar
0
it worked thanks!
9th May 2018, 3:40 PM
Jordan S Reynolds
Jordan S Reynolds - avatar
0
Another question... I've updated the code a little bit and I'm trying to make each of the expense amount fields required before calculating the total but the required attribute in each element isn't working. anyone know what I'm doing wrong? I tried putting the total_expense button inside the form but when that happens the whole page resets or just wiggs out. <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <input type="button" value="Add Expense" onclick="add_expense()"><br> <form> <div id="box"> </div> </form> <input type="submit" value="Total Expenses" onclick="calc_expense()"> <br> <input type="text" id="net_exp"/> </body> </html> var x = -1; var all_exp = 0; function add_expense(){ x += 1; $('#box').prepend("<div class='expense'><input type='text' placeholder='Expense Name'/><input type='text' placeholder='Amount' class='e' required='required'/><input type='button' class='remover' value='Remove' onclick='remove_expense()'/><br><br><br></div>"); } function calc_expense(){ all_exp=0; $('.e').each(function(){ all_exp += parseInt($(this).val()); }); $('#net_exp').val(all_exp); } function remove_expense(){ $('.expense')[0].remove(); }
9th May 2018, 6:10 PM
Jordan S Reynolds
Jordan S Reynolds - avatar