Desarrollo y diseño

calculo automatico valores numéricos con javascript

C
chusazo #1 May '17

Me hubiese gustado incluir este aporte en:

Calcular resultados en tiempo real en formulario

Pero, por razones de antigüedad, no es posible incluir nada aquí. Así que he tomado el script facilitado por scumah y como muy bien indicaba él, lo he pulido un poco.

Este script permite que a medida que se van cumplimentando los inputs numéricos de un formulario, se calcule el resultado, independientemente del orden en que se rellenen y sin necesidad de pulsar ningún botón:

<head>
  <script language="javascript">
  function sumar()
  {
      /*var total = 0;*/
      var valor1 = document.getElementById("val1")
      var valor2 = document.getElementById("val2")

  var total = parseInt(val1.value) + parseInt(val2.value);

  var Display = document.getElementById("Display");
  if(isNaN(total)){var total = 0;}
 Display.innerHTML = total;
  }
  </script>
</head>
<body>
  <input placeholder="0" id="val1" onkeyup="sumar()"/>
  <input placeholder="0" id="val2" onkeyup="sumar()" />
	<span>=&nbsp;</span><span id="Display">0</span>
</body>
1
s4suk3
s4suk3 #2 May '17 Penitente 
<head>
  <script language="javascript">
  function sumar()
  {
      /*var total = 0;*/
      var valor1 = document.getElementById("val1")
      var valor2 = document.getElementById("val2")

  var total = parseInt(val1.value) + parseInt(val2.value);
  


  var Display = document.getElementById("Display");
  if(isNaN(total)){var total = 0;}
 Display.innerHTML = total;
  }
  

      document.getElementById("val1")
			.addEventListener("keyup", sumar());
    document.getElementById("val2")
			.addEventListener("keyup", sumar());

  </script>
</head>
<body>
  <input placeholder="0" id="val1" onkeyup="sumar()"/>
  <input placeholder="0" id="val2" onkeyup="sumar()" />
    <span>=&nbsp;</span><span id="Display">0</span>
</body>

Reto para el siguiente amante de JS:
Añadir que al pulsar "Intro" en vez de sumar reste

Usuarios habituales

Tags