Nouvelle formation ! Tous les codeurs devraient apprendre l'IA générative !
Essayez une leçon gratuite0
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 Réponses
+ 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();
}
Vous avez souvent des questions comme celle-ci ?
Apprenez de manière plus efficace, gratuitement :
Aujourd'hui en vedette
Internal vs external JS
2 Votes
Can anyone guide me
0 Votes
i need help
0 Votes
Snake game
0 Votes
Python Core
0 Votes