[SOLUCIONADO] Función que sume numeros y el resultado lo muestre de forma automática

MLDGATO · #1 (**permalink**) 25/10/2014, 16:54

Hola estoy modificando los datos de una base de datos con php, dichos datos son 6 números os cuales al sumarlos me tiene que dar 100, la idea es que tengo un formulario con 6 inputs los cuales obtiene el value por medio de php y en el body tengo una función con el evento OnLoad que me llama a la función suma y esta toma los valores de los inputs y los suma, hasta aquí voy bien y en cada input coloque el evento OnChange que me llama a la misma función para que me valla mostrando el resultado segun cambio los valores de cada input, este es el código que tengo:

Código HTML:

Ver original<body class="fondogris" onLoad="suma()">
<div id="ContenidoPruebas">
<form id="Prueba" name="Prueba" method="post">
  <h3>Modificar el resultado del test de Toma de decisiones.</h3>
  <p>&nbsp;</p>
<p><strong>Postulante:</strong> <?php echo $fila['Nombres']." ".$fila['Apellidos']; ?></p>
<p>&nbsp;</p>
<p style="width:375px; text-align:justify;"><strong>Nota:</strong> Importante, para modificar los datos de este test los valores deben dar un total del 100% de lo contrario no podrá hacer la modificación.</p>
<p>&nbsp;</p>
<table width="550" align="center" cellspacing="5">
  <tbody>
    <tr>
      <td width="315"><label for="PadreCritico">Padre Critico:</label></td>
      <td width="164" align="right"><label for="Total">% Total:</label></td>
    </tr>
    <tr>
      <td><input name="PadreCritico" type="number" required="required" class="datos" id="PadreCritico" max="100" min="0" value="<?php echo $ttd['PadreCritico']; ?>" onChange="suma()"></td>
      <td align="right"><input name="Total" type="text" class="datosmenor3" id="Total"></td>
    </tr>
    <tr>
      <td><label for="PadreNutritivo2">Padre Nutritivo:</label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input name="PadreNutritivo" type="number" required="required" class="datos" id="PadreNutritivo" max="100" min="0" value="<?php echo $ttd['PadreNutritivo']; ?>" onChange="suma()"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><label for="Adulto2">Adulto:</label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input name="Adulto" type="number" required="required" class="datos" id="Adulto" max="100" min="0" value="<?php echo $ttd['Adulto']; ?>" onChange="suma()"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><label for="NinoSumiso2">Niño Sumiso:</label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input name="NinoSumiso" type="number" required="required" class="datos" id="NinoSumiso" max="100" min="0" value="<?php echo $ttd['NinoSumiso']; ?>" onChange="suma()"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><label for="NinoLibre">Niño Revelde:</label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input name="NinoRevelde" type="number" required="required" class="datos" id="NinoRevelde" max="100" min="0" value="<?php echo $ttd['NinoRevelde']; ?>" onChange="suma()"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><label for="NinoLibre">Niño Libre:</label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input name="NinoLibre" type="number" required="required" class="datos" id="NinoLibre" max="100" min="0" value="<?php echo $ttd['NinoLibre']; ?>" onChange="suma()"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input name="submit" type="submit" class="botonform" id="submit" value="Modificar"></td>
      </tr>
  </tbody>
</table>
<img src="../../Imagenes/Postulantes/<?php echo $seccion7['Imagen']; ?>" width="150" height="150" />
</form>
<script>
$("#Prueba").validate();
</script>
</div>
</body>

La función es:

Código Javascript:

Ver originalfunction suma()
{
    PC = parseInt(document.getElementById("PadreCritico").value);
    PN = parseInt(document.getElementById("PadreNutritivo").value);
    A = parseInt(document.getElementById("Adulto").value);
    NS = parseInt(document.getElementById("NinoSumiso").value);
    NR = parseInt(document.getElementById("NinoRevelde").value);
    NL = parseInt(document.getElementById("NinoLibre").value);
    
    suma = PC+PN+A+NS+NR+NL;
    
    document.getElementById("Total").value = suma;
    
}

Como ven en el body está la función con el evento OnLoad, ahí me funciona, pero en el Onchange de los inputs ahí no, muchas gracias por la orientación.

zerokilled · #2 (**permalink**) 25/10/2014, 21:12

buenas,
tienes que tener mucho cuidado cuando repites identificadores/nombres ya utilizados. tienes un conflicto de identificador con una función y una variable. la función se llama suma y la variable (linea 10) también. la función se define en el ámbito global y su nombre ya esta reservado para esa función. luego cuando se ejecuta la función, se crea la variable suma también en el ámbito global. como ya existe dicho nombre en ese ámbito, lo que ocurre es que se sobre escribe la función por el valor computado. de modo que ya deja de ser una función y ahora es un número. lo más adecuado sería que declares la variable en el ámbito local de la función usando var.