<!DOCTYPE html>
<!--http://www.lawebdelprogramador.com-->
<html>
<head>
<script type="text/javascript">
/**
* Funcion que se ejecuta cada vez que se añade una letra en un cuadro de texto
* Suma los valores de los cuadros de texto
*/
function sumar()
{
var valor1=verificar("valor1");
var valor2=verificar("valor2");
var valor3=verificar("valor3");
var valor4=verificar("valor4");
// realizamos la suma de los valores y los ponemos en la casilla del
// formulario que contiene el total
document.getElementById("total").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(valor3)+parseFloat(valor4);
}
/**
* Funcion para verificar los valores de los cuadros de texto. Si no es un
* valor numerico, cambia de color el borde del cuadro de texto
*/
function verificar(id)
{
var obj=document.getElementById(id);
if(obj.value=="")
value="0";
else
value=obj.value;
if(validate_importe(value,1))
{
// marcamos como erroneo
obj.style.borderColor="#808080";
return value;
}else{
// marcamos como erroneo
obj.style.borderColor="#f00";
return 0;
}
}
/**
* Funcion para validar el importe
* Tiene que recibir:
* El valor del importe (Ej. document.formName.operator)
* Determina si permite o no decimales [1-si|0-no]
* Devuelve:
* true-Todo correcto
* false-Incorrecto
*/
function validate_importe(value,decimal)
{
if(decimal==undefined)
decimal=0;
if(decimal==1)
{
// Permite decimales tanto por . como por ,
var patron=new RegExp("^[0-9]+((,|\.)[0-9]{1,2})?$");
}else{
// Numero entero normal
var patron=new RegExp("^([0-9])*$")
}
if(value && value.search(patron)==0)
{
return true;
}
return false;
}
</script>
<style>
input {border:1px solid #808080;text-align:right;width:100px;}
#total {font-weight:bold;}
div {width:200px;text-align:right;}
</style>
</head>
<body>
<h1>Suma de valores</h1>
<div>Valor 1: <input type="text" id="valor1" onkeyup="sumar();"></div>
<div>Valor 2: <input type="text" id="valor2" onkeyup="sumar();"></div>
<div>Valor 3: <input type="text" id="valor3" onkeyup="sumar();"></div>
<div>Valor 4: <input type="text" id="valor4" onkeyup="sumar();"></div>
<div>Total: <input type="text" id="total" disabled value="0">
</body>
</html>
Comentarios sobre la versión: Versión 2 - Versión con decimales (19)
Averiguaste como hacerlo??
Gracias
Poder tener el total de manera independiente valor1 + valor2
Gracias por cualquier ayuda que me puedan dar
Abajo dice resultado, pero no sé como hacer para que me de el resultado de la suma
// Obtener la referencia del elemento body
// Crea un elemento <table> y un elemento <tbody>
// Crea las celdas
// Crea las hileras de la tabla
// Crea un elemento <td> y un nodo de texto, haz que el nodo de
// texto sea el contenido de <td>, ubica el elemento <td> al final
// de la hilera de la tabla
case 1:
case 2:
case 3:
case 4:
}
}
/*var suma = sumaOtro;
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
} */
/*var suma = val4;
var total = document.getElementById("total");
total.innerHTML += parseFloat(suma);
alert(total.innerHTML);*/
// agrega la hilera al final de la tabla (al final del elemento tblbody)
}
// posiciona el <tbody> debajo del elemento <table>
// appends <table> into <body>
// modifica el atributo "border" de la tabla y lo fija a "2";
}
}
};
var obj=null;
{
obj=targetElement;
}
EL HTML
Saludos!!!!