he realizado un formulario con varios input dinamico el cual me suman la cantidad y el precio y me lo muestra en el campo total pero a la hora de sumar todos los input para sacar el totalfinal el campo no me lo muestra, estoy utilizando .innerHtml para mostrarlo. el formulario lo estoy cargando en un modal les agradeceria su ayuda pues es mi primer proyecto.
//he realizado un formulario con varios input dinamico el cual me suman la cantidad y el precio y me lo muestra en el campo total pero a la hora de sumar todos los input para sacar el totalfinal el campo no me lo muestra, estoy utilizando .innerHtml para mostrarlo. el formulario lo estoy cargando en un modal les agradeceria su ayuda pues es mi primer proyecto.
$("#agrega").click(function(){
var newtr = '<tr class="item" >';
newtr = newtr + '<td><input type="number" class="iProduct" style="width : 60px; height : 30px;" size="12" name="cant[]" id="cantidad[]" onChange="Calcular(this);" value="1"/></td>';
newtr = newtr + '<td><input type="text" class="iProduct" size="12" name="material[]"/></td>';
newtr = newtr + '<td><input type="text" class="iProduct" size="12" name="tmaterial[]"/></td>';
newtr = newtr + '<td><input type="text" class="iProduct" size="12" name="especi[]"/></td>';
newtr = newtr + '<td><input type="text" class="iProduct" size="12" name="medidas[]"/></td>';
newtr = newtr + '<td><input type="text" class="iProduct" size="12" name="valr[]" id="precunit[]" onChange="Calcular(this);" value="0"></td>';
newtr = newtr + '<td><input size="12" class="iProduct" type="text" id="totalitem[]" readonly /> ';
newtr = newtr + '<td class="eliminar"><input type="button" value="-" /> </td> </tr>';
$("#tabla tbody").append(newtr);
});
function Calcular(ele) {
var cantidad = 0, precunit = 0, totalitem = 0 ;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].firstChild.id == 'cantidad[]') {
cantidad = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.id == 'precunit[]') {
precunit = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.id == 'totalitem[]') {
anterior = nodes[x].firstChild.value;
totalitem = parseFloat((precunit*cantidad),10);
nodes[x].firstChild.value = totalitem;
}
}
// Resultado final de cada fila ERROR, al editar o eliminar una fila
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
//
}total.innerHTML = parseFloat(total.innerHTML)+totalitem -anterior ;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- cuerpo del diálogo -->
<form method="POST" action="insertar.php" id="form_insert" name="form_insert">
<table class="table" id="tabla">
<thead>
<tr>
<th scope="col">Cant</th>
<th scope="col">Material</th>
<th scope="col">Tipo de material</th>
<th scope="col">especificaciones</th>
<th scope="col">Medidas</th>
<th scope="col">Precio</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody style="text-align: center;" >
</tbody>
</table>
</form>
<table>
<tr>
<th>Total $</th>
<td><span id="total">0</span> </td>
</tr>
</table>
<br>
<button type="button" class="btn btn-primary" id="agrega" onchange="RefrescaProducto();">Agregar</button>
<button type="button" id="btn_guardar" class="btn btn-primary" data-bs-dismiss="modal">Guardar</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="close">Close</button>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
document.getElementById("tot");
. Eso es debido a que no existe ningún elemento cuyaid
seatot
. ¿Podrías revisar eso?