Sumar dos numeros con tecla TAB

nelson12345 · #1 (**permalink**) 29/11/2015, 21:11

Buen dia, tengo un codigo para sumar numeros a medida que se bayan ingresando en los campos de texto. Pero quiero que el resultado se muestre dentro de un textbox pero al tratar de hacerlo se me borra el input y aparece el resultado impreso en pantalla

Código HTML:

Ver original<html>
<head>
<title>Sumar campos</title>
 
<script language="javascript" type="text/javascript">
var total = 0;
function sumacampos()
{
 
var suma = 0;
 
//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0, campos = document.form1; i < campos.elements.length; i++)
{
 
//Recorro el vector de los campos y realizo la suma
total = suma;
suma += parseFloat(campos.elements[i].value);
if (isNaN(suma)) suma = total;
 
}
 
//Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
document.getElementById('MiLabelTOTAL').innerHTML = suma;
 
 
 
}
 
 
</script>
</head>
<body>
<form name="form1">
<input type="text" name="CampoaSumar" id="Campo1" value="" onkeyup="sumacampos();" />
<input type="text" name="CampoaSumar" id="Campo2" value="" onkeyup="sumacampos();" />
<input type="text" name="CampoaSumar" id="Campo3" value="" onkeyup="sumacampos();" />
<br/>
Total:<label id="MiLabelTOTAL" ><input type="text" name="total" value=""></input> </label>
 
</form>
 
 
</body>
</html>

Alexis88 · #2 (**permalink**) 30/11/2015, 03:28

El error es claro: reemplazas el contenido del <label>, el cual originalmente está compuesto únicamente por el <input> y lo reemplazas por el resultado que deseas mostrar.

Te sugiero eliminar el <label> o tenerlo aparte del <input> y a este último asignarle el valor mediante la propiedad value:

Código Javascript:

Ver originaldocument.querySelector("[name=total]").value = suma;

Solo ten cuidado al realizar las operaciones ya que de la forma en la que tienes tu algoritmo, la suma se ejecutará cuando se pulse cualquier tecla mientras cualquiera de las cajas de texto tenga el enfoque. Si quieres que la suma se realice al pulsar la tecla de tabulación, necesitas obtener el código de la tecla pulsada y compararlo con el código ASCII de la tecla en mención el cual es el 9.

Por cierto, se escribe «vayan».

Un saludo