He intentado modificarlo de mil maneras diferentes y todavía no estoy seguro de cuál es el problema. Un poco de ayuda sería muy apreciada. el objetivo sería sumar como si fuera un total en un carrito de compras. a medida que se agreguen nuevos productos y precios, el precio total se actualizará.
agregué el html para que pueda ver el NaN que se muestra. confío en VALORtotal y reduzco aquí.
let array = [0]; function adddata() { let cproducto = document.getElementById("producto"); let cprecio = document.getElementById("precio"); let VALUEcprecio = cprecio.value //table============ let table = document.getElementById("dymanictable"); let rowCount = table.rows.length; let row = table.insertRow(rowCount); //insetar row.insertCell(0).innerHTML = cproducto.value; row.insertCell(1).innerHTML = cprecio.value; //sumar let VALORtotal = 0 //armo formula de suma const suma = array.reduce((a, b) => { return a.VALUEcprecio + b.VALUEcprecio }); //le agrego al 0 su valor nuevo VALORtotal = VALORtotal + suma console.log(VALORtotal) // add todos los precios y display row.insertCell(2).innerHTML = VALORtotal; //mostrar objeto que se va a agregar let objeto = new PRODUCTO(cproducto.value, VALUEcprecio) console.log(objeto) //mostrar array completo array.push(objeto); console.log(array); } class PRODUCTO { constructor(producto, precio) { this.producto = producto, this.precio = precio; } } <table> <!--INPUT--> <tr> <td>Producto:</td> <td><input type="text" id="producto"></td> </tr> <tr> <td>Precio:</td> <td><input type="text" id="precio"></td> </tr> <tr> <td> <!--BOTTON ADD--> <input type="button" id="add" value="Add" onclick="adddata()"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <table id="dymanictable" cellpadding="2"> <tr> <td><b>producto</b></td> <td><b>precio</b></td> <td><b>total</b></td> </tr> </table>Creo que tienes un problema de tipo aquí.
En primer lugar, empuja objetos a una matriz que inició con un número (aquí array=[0] )
Entonces, el tipo de retorno de sus elementos de entrada es una cadena. Eso está bien para el nombre del producto, pero por el precio querrás hacer una conversión aquí.
Está obteniendo NaN porque está agregando manzanas y plátanos.
Prueba este código aquí.
Nota:
Cambié el comportamiento de la aplicación para que el total en una fila incluya el valor del producto que se muestra en esa fila. Me pareció que este comportamiento tenía más sentido. Siéntase libre de volver a cambiarlo a su forma preferida, obviamente
class PRODUCTO { constructor(producto, precio) { (this.producto = producto), (this.precio = precio); } } let productArray = []; function addData() { let cproducto = document.getElementById("producto"); let cprecio = document.getElementById("precio"); let VALUEcprecio = parseFloat(cprecio.value); //table============ let table = document.getElementById("dymanictable"); let rowCount = table.rows.length; let row = table.insertRow(rowCount); //insetar row.insertCell(0).innerHTML = cproducto.value; row.insertCell(1).innerHTML = cprecio.value; //sumar let VALORtotal = 0; //mostrar objeto que se va a agregar let objeto = new PRODUCTO(cproducto.value, VALUEcprecio); console.log(objeto); //mostrar array completo productArray.push(objeto); console.log(productArray); const suma = productArray .map((obj) => obj.precio) .reduce((acc, next) => acc + next); //le agrego al 0 su valor nuevo VALORtotal = VALORtotal + suma; console.log(VALORtotal); // add todos los precios y display row.insertCell(2).innerHTML = `${VALORtotal}`; } <table> <!--INPUT--> <tr> <td>Producto:</td> <td><input type="text" id="producto" /></td> </tr> <tr> <td>Precio:</td> <td><input type="text" id="precio" /></td> </tr> <tr> <td> <!--BOTTON ADD--> <input type="button" id="add" value="Add" onclick="addData()" /> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <table id="dymanictable" cellpadding="2"> <tr> <td><b>producto</b></td> <td><b>precio</b></td> <td><b>total</b></td> </tr> </table>No está utilizando la función de reducción correctamente. Necesita un valor inicial para comenzar y luego dar el valor actual y el valor de bucle actual para realizar operaciones.
Debe usar su función de reducción como un ejemplo dado:
const array = [ { VALUEcprecio: '10.15', }, { VALUEcprecio: '15', }, { VALUEcprecio: 20, } ] const suma = array.reduce((acc, val) => { // Added parseFloat to handle any time of value for addition return acc + parseFloat(val.VALUEcprecio) }, 0); console.log(suma) // this will give correct output.