I have a problem trying to make a sum in dynamic inputs, my code is as follows
<?php
require '../api/conection.php';
$objEst = new DataBase();
$sth = $objEst->prepare('SELECT nombreObra FROM contrato');
$sth->execute();
$result = $sth->fetchAll();
if(isset($_GET['opcion'])){
$sth2 = $objEst->prepare('SELECT * FROM contrato WHERE nombreObra = :dato');
$sth2->bindParam(':dato', $_GET['opcion']);
$sth2->execute();
$result2 = $sth2->fetchAll();
$sth3 = $objEst->prepare('SELECT * FROM presupuestos WHERE nombreObra = :dato2');
$sth3->bindParam(':dato2', $_GET['opcion']);
$sth3->execute();
$result3 = $sth3->fetchAll();
$sth4 = $objEst->prepare('SELECT noEst FROM estimaciones WHERE nombreObra = :dato3');
$sth4->bindParam(':dato3', $_GET['opcion']);
$sth4->execute();
$result4 = $sth4->fetchAll();
if($result4){
$sth5 = $objEst->prepare('SELECT MAX(noEst) FROM estimaciones WHERE nombreObra = :dato4');
$sth5->bindParam(':dato4', $_GET['opcion']);
$sth5->execute();
$result5 = $sth5->fetchColumn();
if($result5 <= 1){
$noest = $result5;
}else{
$noest = $result5+1;
}
}else{
$noest = 1;
}
}
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>OBRAS PUBLICAS 2017</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<script type="text/javascript">
var opcion = "";
function buscar(){
opcion = document.getElementById('obra').value;
window.location.href =
'http://localhost:8888/base2/partials/estimacion.php?opcion='+opcion;
}
}
function calcula(ele) {
var antes = 0, pres = 0, excedente = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x=0; x<nodes.length;x++) {
if (nodes[x].firstChild.name == 'antes[]'){
antes = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'pres[]'){
pres = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'excedente[]'){
excedente = parseFloat((anterior)*(presente),10);
nodes[x].firstChild.value = excedente;
}
}
}
</script>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<br>
<h3 style="text-align:center;" class="modal-title">BOLETA DE ESTIMACION</h3>
<a href="http://localhost:8888/base2/" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Inico
</a>
<a style="float: right;" href="estimacion.php" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> Selecciona otra Obra
</a>
<div class="modal-body">
<form action="api/estimacion.php" id="boleta" method="POST">
<div class="col-sm-12">
<label for="datos">Selecciona una Obra</label>
<select id='obra' onchange="return buscar();" class="form-control" required="true">
<?php
if(isset($_GET['opcion'])){
echo "<option value=".$_GET['opcion']." > ". $_GET['opcion']."</option>";
}else{?>
<option value=""></option> <?php
foreach ($result as $key => $value) {
echo "<option value='".$value['nombreObra']."'> ". $value['nombreObra']."</option>";
}
}
?>
</select>
<br>
</div>
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Datos de Obra</div>
<div class="panel-body">
<?php
if(isset($_GET['opcion'])){?>
<div class="form-group col-sm-7">
<label for="numObra_Con">Nombre de Obra</label>
<input type="text" name="nombreObra2" value="<?php echo $result2[0]['nombreObra']; ?>" class="form-control" readonly >
</div>
<div class="form-group col-sm-2">
<label for="numObra_Con">No. Estimacion</label>
<input type="text" name="noEstimacion" value="<?php echo $noest;?>" class="form-control" ng-model="noEstimacion" readonly>
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">Fecha Estimacion</label>
<input type="date" name="fechaEstimacion" class="form-control" ng-model="fechaEstimacion">
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">No. de Obra</label>
<input type="text" name="noObra2" class="form-control" value="<?php echo $result2[0]['numObra']; ?>" ng-model="nombreObra2.numObra" readonly >
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">No. de Contrato</label>
<input type="text" name="noContrato2" class="form-control" value="<?php echo $result2[0]['numCon']; ?>" ng-model="nombreObra2.numCon" readonly >
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">No. de Oficio</label>
<input type="text" name="noOficio2" class="form-control" value="<?php echo $result2[0]['numOficio']; ?>" ng-model="nombreObra2.numOficio" readonly >
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">Importe de Obra</label>
<input type="text" name="importe2" class="form-control" value="<?php echo '$'.$result2[0]['monto']; ?>" ng-model="nombreObra2.monto | currency" readonly >
</div>
<?php
}else{?>
<div class="form-group col-sm-8">
<label for="numObra_Con">Nombre de Obra</label>
<input type="text" name="nombreObra2" class="form-control" readonly >
</div>
<div class="form-group col-sm-2">
<label for="numObra_Con">No. Estimacion</label>
<input type="text" name="noEstimacion" class="form-control" ng-model="noEstimacion">
</div>
<div class="form-group col-sm-2">
<label for="numObra_Con">Fecha Estimacion</label>
<input type="date" name="fechaEstimacion" class="form-control" ng-model="fechaEstimacion">
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">No. de Obra</label>
<input type="text" name="noObra2" class="form-control" ng-model="nombreObra2.numObra" readonly >
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">No. de Contrato</label>
<input type="text" name="noContrato2" class="form-control" ng-model="nombreObra2.numCon" readonly >
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">No. de Oficio</label>
<input type="text" name="noOficio2" class="form-control" ng-model="nombreObra2.numOficio" readonly >
</div>
<div class="form-group col-sm-3">
<label for="numObra_Con">Importe de Obra</label>
<input type="text" name="importe2" class="form-control" ng-model="nombreObra2.monto | currency" readonly >
</div>
<?php
}
?>
</div>
</div>
</div><br>
<div id="contenedor" style="paddding: 0; width:100%;">
<table id="tabla" class="table table-bordered">
<thead>
<tr>
<th COLSPAN="2">PARTIDAS APROBADAS</th>
<th COLSPAN="4">PRESUPUESTO CONTRATADO</th>
<th COLSPAN="3">VOLUMEN ACUMULADO</th>
<th rowspan="2">EXCEDENTE</th>
<th rowspan="2">IMPORTE ESTIMADO</th>
</tr>
<tr>
<td class="col-sm-1">CLAVE</td>
<td class="col-sm-3">CONCEPTO</td>
<td>UNIDAD</td>
<td class="col-sm-2">PRECIO U</td>
<td>CANTIDAD</td>
<td class="col-sm-2">IMPORTE</td>
<td>ANTERIOR</td>
<td>PRESENTE</td>
<td>ACUMULADO</td>
</tr>
</thead>
<tbody>
<?php
if(isset($_GET['opcion'])){
foreach ($result3 as $key => $value2) {
?>
<tr><td><input type="text" value="<?php echo $result3[$key]['clave'] ?>" class="form-control" name="clave[]" readonly></td>
<td roswpan="2"><input type="text" value="<?php echo $result3[$key]['concepto'] ?>" class="form-control" name="concepto[]" readonly><br><textarea name="descripcion[]" value="<?php print_r($result3[$key]['descripcion'])?>" rows="3" class="form-control" readonly><?php print_r($result3[$key]['descripcion'])?></textarea></td>
<td><input type="text" class="form-control" name="unidad[]" value="<?php echo $result3[$key]['unidad']; ?>" readonly></td>
<td><input type="text" class="form-control" name="precioU[]" value="<?php echo $result3[$key]['precioU']; ?>" readonly></td>
<td><input type="text" class="form-control" name="cantidad[]" value="<?php echo $result3[$key]['cantidad']; ?>"></td>
<td><input type="text" class="form-control" name="totalParcial[]" value="<?php echo $result3[$key]['totalParcial']; ?>" readonly></td>
<td><input type="text" class="form-control" onchange="calcula(this);" name="antes[]" value="0"></td>
<td><input type="text" class="form-control" onchange="calcula(this);" name="pres[]" value="0"></td>
<td><input type="text" class="form-control" value="0" name="acumulado[]"></td>
<td><input type="text" class="form-control" value="0" name="excedente[]"></td>
<td><input type="text" class="form-control" name="importeEstimacion[]"></td></tr>
<?php }
}else{?>
<tr><td><input type="text" value="" class="form-control" name="clave[]" readonly></td>
<td roswpan="2"><input type="text" value="" class="form-control" name="concepto[]" readonly><br><textarea name="descripcion[]" value="" rows="3" class="form-control" readonly></textarea></td>
<td><input type="text" class="form-control" name="unidad[]" value="" readonly></td>
<td><input type="text" class="form-control" name="precioU[]" value="" readonly></td>
<td><input type="text" class="form-control" name="cantidad[]" value=""></td>
<td><input type="text" class="form-control" onchange="return calcula(this);" name="antes" value="0"></td>
<td><input type="text" class="form-control" onchange="return calcula(this);" name="pres" value="0"></td>
<td><input type="text" class="form-control" value="0" name="acumulado[]"></td>
<td><input type="text" class="form-control" value="0" name="excedente[]"></td>
<td><input type="text" class="form-control" name="importeEstimacion[]"></td></tr>
<?php
}
?>
</tbody>
</table>
<div></div>
</div>
<input type="submit" id="btn" name="insertar2" value="Enviar" />
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Where after making the first query from the select, it brings the information from the database where it creates and fills the inputs from that information, but when I try to make the onchange it is the dynamic fields before [] and pres [] returns an error to me
"estimate.php? option = Bridgework: 31 Uncaught TypeError: Can not read property 'name' of null at calcula (estimate.php? option = bridgework: 31) at HTMLInputElement.onchange (estimate.php? option = bridgework: 130) "
I did tests and if it enters the for but the error marks me as the next img and I can not find a solution ....