<!DOCTYPE html>
<html>
<head>
<style>
div {width:200px;text-align:right;padding:2px;} input {border:1px solid #808080;text-align:right;width:100px;padding:2px;} #total {font-weight:bold;} .red {border-color:red;} .green {border-color:green;} </style>
</head>
<body>
<h1>Suma de valores</h1>
<div>Valor 1: <input type="text" class='sumar'></div>
<div>Valor 2: <input type="text" class='sumar'></div>
<div>Valor 3: <input type="text" class='sumar'></div>
<div>Valor 4: <input type="text" class='sumar'></div>
<div>Total: <input type="text" id="total" disabled value="0">
</body>
</html>
<script>
const inputs=document.querySelectorAll("input.sumar");
// creamos el evento keyup para cada input que tiene la clase .sumar
for(el of inputs) { el.addEventListener("keyup", sumar);}
/**
* 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()
{ let sum=[...inputs].reduce((acum, el)=>{ return (verificar(el)) ? acum+parseFloat(el.value) : acum;
},0);
document.getElementById("total").value=sum.toFixed(2);}
/**
* 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 y devuelve false
*
* @param object el - elemento input
*
* @return boolean
*/
function verificar(el)
{ el.classList.remove("red", "green"); if (/^[0-9]*\.?[0-9]+$/.test(el.value)) { el.classList.add("green"); return true;
} else { if (el.value) { el.classList.add("red"); }
return false;
}
}
</script>
Crear cuenta
Comentarios sobre la versión: Versión 3 - versión mejorada con ECMAScript6 (3)
¡Muchas gracias!
Sería de esta forma:
Alto en pulgadas:
Ancho en pulgadas:
Total: 0.00 RD$
La fórmula sería el alto más el ancho de la pared y ese resultado la calculadora lo multiplica por 500 y ahí debe salir el precio.
Por ejemplo
Alto:120
Ancho:300
Total: 210,000 RD$
Alguien me puede ayudar con eso por favor?