[SOLUCIONADO] calcular notas definitivas provenientes de una consulta en tiempo real

[josegaitan123]

Cordial saludo

Estoy creando una aplicación para registro de notas, los datos de los estudiantes vienen de una consulta, de acuerdo a la cantidad de estudiante se genera la lista con la cantidad de fila, cada fila necesita capturar tres notas las cuales se le calcula la definitiva, tengo un script que me hace el calculo como quiero pero solo funciona en la primera fila de la lista al pasar a la siguiente fila no hace los calculo.

alguien quien me pueda ayudar. coloco el código para que sea analizado.

Código HTML:

<script language="javascript">
function calcular(){
    n1 = document.getElementById("n1").value;
   n2 = document.getElementById("n2").value;
   n3= document.getElementById("n3").value;
   r= (parseInt(n1)*0.30)+(parseInt(n2)*0.30)+(parseInt(n3)*0.40);
  document.getElementById("resultado").value = r.toFixed(1);

}
 </script> 

Código PHP:

  <?php
             $n=1;
             while($fila=mysql_fetch_array($sql)){
                
                 ?>
                 <td><input type="text" id="n" value="<?php echo $n; ?>"></td>
                 <td><?php echo '<strong>'.$fila['apellidos']. '   ' .$fila['nombres'].'</strong>'; ?></td>
            
                 <td> <input type="number"  name="inas" size="1" maxlength="2" style="width:50px" value="0" step="1" max="8" min="1" ></td>
                 <td> <input type="number"  id="n1"    style="width:50px" value="0"  max="5" min="1" autofocus onChange="calcular();"></td>
                 <td> <input type="number"  id="n2"   style="width:50px" value="0"   max="5" min="1" onChange="calcular();"></td>
                 <td> <input type="number"  id="n3"   style="width:50px" value="0"   max="5" min="1" onChange="calcular();"></td>
                 <td> <input type="number"  id="resultado"   style="width:50px" value="0" step="0.1" max="5" min="1"></td>
                 <td> </td>
                 <td></td>
                 <tr></tr>
               <?php
                $n++;
             }                                        
        ?>   

[pateketrueke]

Pues tu problema es de Javacript/HTML básicamente: repites el mismo ID en cada vuelta del loop y eso no es válido, porque precisamente los ID deben ser identificadores únicos.

Igualmente tu función calcular() está "amarrada" a los mismos IDs siempre, lo cual no funcionará para el resto de los elementos que tienes.

[josegaitan123]

Hola pateketrueke

Gracias por tu respuesta, si la verdad la solución puede ser usando un vector, pero tengo algunas limitaciones con javascript, me podrías dar una maco con algún ejemplo para iniciar

Te lo agradezco

[xfxstudios]

mano podrias probar enviando una id que identifique a los elementos de tu lista, por ejemplo

Código Javascript:

function calcular(X){
    n1 = document.getElementById(X).value;
   n2 = document.getElementById("A"+X).value;
   n3= document.getElementById("B"+X).value;
   r1= (parseInt(n1)*0.30)+(parseInt(n2)*0.30)+(parseInt(n3)*0.40);
   document.getElementById("resultado"+X).value = r1;
 
}
 

Código HTML:

<input type="text" id="A1" value="" placeholder="0"/>
<input type="text" id="B1" value="" placeholder="0"/>
<input type="text" id="1" value="" placeholder="0" onChange="javascript:calcular(this.id);"/>
<input type="text" id="resultado1" value="" readonly/>
 
<br><br>
<input type="text" id="A2" value="" placeholder="0"/>
<input type="text" id="B2" value="" placeholder="0"/>
<input type="text" id="2" value="" onChange="javascript:calcular(this.id);"/>
<input type="text" id="resultado2" value="" readonly/>
 
<br><br>
<input type="text" id="A3" value="" placeholder="0"/>
<input type="text" id="B3" value="" placeholder="0"/>
<input type="text" id="3" value="" onChange="javascript:calcular(this.id);"/>
<input type="text" id="resultado3" value="" readonly/>
 

alli le estoy pasando la id del ultimo campor que es el que va a activar el calculo y las id de los otros campos la copleto con la del ultimo, asi el js diferencia cada linea

Muestra: http://jsfiddle.net/6e7s4mxf/

[josegaitan123]

xfxstudios Gracias por tu respuesta se ve excelente, pero mi lista viene de php como hago para pasar el ID de cada fila a la funcion de JAVASCRIPT

[fbadiola]

Pues al igual que lo haces en el código php que pasaste:

Código PHP:

  <?php 
             $n=1; 
             while($fila=mysql_fetch_array($sql)){ 
                 
                 ?> 
                 <td><input type="text" id="n" value="<?php echo $n; ?>"></td> 
                 <td><?php echo '<strong>'.$fila['apellidos']. '   ' .$fila['nombres'].'</strong>'; ?></td> 
             
                 <td> <input type="number"  name="inas" size="1" maxlength="2" style="width:50px" value="0" step="1" max="8" min="1" ></td> 
                 <td> <input type="number"  id="A<?php echo $n; ?>"    style="width:50px" value="0"  max="5" min="1" autofocus></td> 
                 <td> <input type="number"  id="B<?php echo $n; ?>"   style="width:50px" value="0"   max="5" min="1"></td> 
                 <td> <input type="number"  id="<?php echo $n; ?>"   style="width:50px" value="0"   max="5" min="1" onChange="calcular(this.id);"></td> 
                 <td> <input type="number"  id="resultado<?php echo $n; ?>"   style="width:50px" value="0" step="0.1" max="5" min="1"></td> 
                 <td> </td> 
                 <td></td> 
                 <tr></tr> 
               <?php 
                $n++; 
             }                                         
        ?>   

[josegaitan123]

ok, hermano gracias lo probare y te comentare si me funciono, un abarzo

[xfxstudios]

segun veo inicias un copntador con el while, podrias utilizarlo para personalizar las id asi:

Código PHP:

<td> <input type="number"  id="n<?php echo $n; ?>"   style="width:50px" value="0"   max="5" min="1"></td>
 

y la que va a ejecutar el calculo asi:

Código PHP:

<td> <input type="number"  id="<?php echo $n; ?>"   style="width:50px" value="0"   max="5" min="1" onChange="calcular(this.id);"></td>
 

si visualizar el codigo ya generado, deveria de verse asi:

Código HTML:

<td> <input type="number"  id="n1"   style="width:50px" value="0"   max="5" min="1"></td>
<td> <input type="number"  id="1"   style="width:50px" value="0"   max="5" min="1" onChange="calcular(this.id);"></td>
 

y asi suscesivamente

[josegaitan123]

fbadiola, xfxstudios

Gracias por su ayuda me funciono de maravilla, gracias si me calcula la nota definitiva de varias filas. ahora tengo un detalle que solo calcula la definitiva al hacer los cambios en la tercera nota, quisiera que se actualice la nota definitiva al cambiar cualquiera de las tres notas.

Gracias, espero una mano...!

[josegaitan123]

Gracias amigo ya lo resolvi su ayuda me dio una buena base, aqui coloco el codigo para alguien que tenga el mismo problema

funcion javascript

Código HTML:

<script language="javascript">
function calcular(x){
   n1 = document.getElementById("a"+x).value;
   n2 = document.getElementById("b"+x).value;
   n3= document.getElementById("c"+x).value;
   r1= (parseFloat(n1)*0.30)+(parseFloat(n2)*0.30)+(parseFloat(n3)*0.40);
   document.getElementById("def"+x).value = r1.toFixed(1);   
  
}
 </script>
 

Codigo PHP

Código PHP:

while($fila=mysql_fetch_array($sqlest)){
                
                 ?>
                 <td><?php echo $n; ?></td>
                 <td><?php echo '<strong>'.$fila['apellidos']. '   ' .$fila['nombres'].'</strong>'; ?></td>
                 <td> <input type="number" name="inas" size="1" maxlength="2" style="width:50px"  step="1" max="8" min="1" value="<?php echo $fila['inasistencias'] ?>"></td>
                 <td> <input type="number" name="con" id="a<?php echo $n ?>"            style="width:50px"   max="5" step="0.1" min="1" autofocus value="<?php echo $fila['conocimiento'] ?>" onChange="calcular(<?php echo $n ?>);"></td>
                 <td> <input type="number" name="des" id="b<?php echo $n ?>"            style="width:50px"    max="5" min="1" step="0.1" value="<?php echo $fila['desempeno'] ?>" onChange="calcular(<?php echo $n ?>);" ></td>
                 <td> <input type="number" name="pro" id="c<?php echo $n ?>"             style="width:50px"     max="5" min="1" step="0.1" value="<?php echo $fila['producto'] ?>" onChange="calcular(<?php echo $n ?>);"></td>
                 <td> <input type="text"  name="def" id="def<?php echo $n ?>"           style="width:50px" step="0.1"   max="5" min="1" value="<?php echo $fila['definitiva'] ?>" readonly ></td>
                 <td> </td>
                 <tr></tr>
               <?php
                $n++;
             }
 

Si alguien de los colaboradores me responde si es una buena solucion