function appendDiv() { var e = "<div>\ <button onclick='appendBox(this)'>ADD NUMBER BOX</button>\ <input type='number' class='sumOfTotal' readonly>\ </div>" $("body").append(e); } function appendBox(This) { var e = "<div><input type='number' class='number'></input>\ <button onclick='removeNum(this)'>DELETE NUM</button></div>" $(This.closest('div')).append(e); } function removeNum(This) { $(This.closest('div')).remove(); } <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js/lab2.js"></script> </head> <body> <button onclick="appendDiv()">ADD DIV</button> </body> </html>Quiero actualizar el valor de sumOfTotal cada vez que cambio los valores de entrada. PERO cada uno de los valores de las cajas someOfTotal tiene que ser la suma de los números de su div.
Resumen, cada div tiene su propia salida (sumOfTotal) y entradas (clase de número). Y la propia salida de cada div tiene que ser la suma de sus propios números.
Primero, recomendaré usar detectores de eventos en lugar del javascript en línea. Prueba esto
function calculateSum($box){ let numbers, sum; numbers = $box.find('.number'); // get all .number inputs numbers = numbers.filter((i, el) => !!el.value); // filter out empty fields numbers = numbers.map((i, el) => el.value).get(); // get entered values sum = numbers.reduce((sum, val) => sum + parseFloat(val), 0); // sum numbers $box.find('.sumOfTotal').val(sum); // display sum } $('.append-div-btn').on('click', function(){ $("body").append(` <div class="box"> <button type="button" class="append-box-btn">ADD NUMBER BOX</button> <input type="number" class="sumOfTotal" readonly> </div> `); }); $('body').on('click', '.append-box-btn', function(){ $(this).parent().append( `<div> <input type="number" class="number"></input> <button type="button" class="remove-num-btn">DELETE NUM</button> </div>` ) }).on('click', '.remove-num-btn', function(){ let $box = $(this).closest('.box'); $(this).parent().remove(); calculateSum($box); }).on('input', '.number', function(){ let $box = $(this).closest('.box'); calculateSum($box); }); .box { padding: 10px; border: 1px solid #000; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <button class="append-div-btn">ADD DIV</button>Puedes guardar el resultado de la suma en una cookie, con eso podrás obtener el resultado e incrementarlo como quieras!
Aquí está la función para obtener y configurar una cookie en JS:
function setCookie(cname, cvalue, exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); let expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { let name = cname + "="; let ca = document.cookie.split(';'); for(let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; }