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!
7 Answers
+ 2
Please post your code here so we may be able to see where the issue is.
+ 1
Here is the code:
https://code.sololearn.com/WAA5Vtf4NEAK/?ref=app
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);
}
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.
0
hmm I changed it but now #net_exp doesn't show any value whenever, calc_expenses is called... any ideas?
0
it worked thanks!
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();
}
Often have questions like this?
Learn more efficiently, for free:
Hot today
Javascript
3 Votes
Why text takes time to load
1 Votes
Please Modify My Code
1 Votes
Digital currency
1 Votes