javascript - jQuery's click() inside "for" loop firing once -
this html code:
<!doctype html> <head> <title>chemist</title> <link href="stylesheet.css" rel="stylesheet"> </head> <body> <h2 id="money"></h2> <table border="1px" id="inventory_t"></table> <script src="jquery.js"></script> <script src="app.js"></script> </body> </html>
this app.js code:
var money = 10; var inventorynames = ["carbon", "hydrogen"]; var inventoryamounts = [5, 5]; var inventorylength = 2; updatemoney(); populateinventory(); checkaddtomixclick(); function updatemoney(){ $("#money").text(money + "$"); } function populateinventory(){ $("#inventory_t").empty(); $("#inventory_t").append("<tr><td colspan='3'>inventory</td></tr>") for(let = 0; < inventorylength; i++){ $("#inventory_t").append("<tr><td style='text-align:center'>" + inventorynames[i] + "</td><td style='text-align:center'>" + inventoryamounts[i] + "</td><td id='add_to_mix_" + + "'>+</td></tr>") } } function checkaddtomixclick(){ for(let = 0; < inventorylength; i++){ $("#add_to_mix_" + i).click(function(){ inventoryamounts[i]--; populateinventory(); }); } }
my problem when run , click "+" click() event fires, after nothing happens.
debugging shows when call checkaddtomixclick() function , click "+" works again, stops working after that.
any solution this?
just add checkaddtomixclick();
populateinventory()
function, , remove checkaddtomixclick()
top of code.
var money = 10; var inventorynames = ["carbon", "hydrogen"]; var inventoryamounts = [5, 5]; var inventorylength = 2; updatemoney(); populateinventory(); function updatemoney(){ $("#money").text(money + "$"); } function populateinventory(){ $("#inventory_t").empty(); $("#inventory_t").append("<tr><td colspan='3'>inventory</td></tr>") for(let = 0; < inventorylength; i++){ $("#inventory_t").append("<tr><td style='text-align:center'>" + inventorynames[i] + "</td><td style='text-align:center'>" + inventoryamounts[i] + "</td><td id='add_to_mix_" + + "'>+</td></tr>") } checkaddtomixclick(); } function checkaddtomixclick(){ for(let = 0; < inventorylength; i++){ $("#add_to_mix_" + i).click(function(){ inventoryamounts[i]--; populateinventory(); }); } }
<!doctype html> <head> <title>chemist</title> <link href="stylesheet.css" rel="stylesheet"> </head> <body> <h2 id="money"></h2> <table border="1px" id="inventory_t"></table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> </body> </html>
Comments
Post a Comment