JavaScript » Formulario que multiplica numeros en JavaScript
Una de las cosas para las que se ha usado JavaScript en los formularios HTML es para operar entre valores introducidos en los campos del formulario, por ejemplo para multiplicar valores. Aunque nos facilita una funcionalidad hace que por desgracia nos aparezca mucho código JavaScript. Y digo por desgracia
ya que creo que no hay cosa más tediosa y complicada que el mantenimiento de JavaScript.
Sin ir más lejos este es uno de los principios en los que se apoya la especificación de XForms. Redución del código JavaScript. Solo queda que algún día este implementada en los navegadores. Hasta entonces seguiremos usando JavaScript.
En el caso que hoy nos compete, la idea es facilitar al usuario una multiplicación de dos valores introducidos en un formulario. Es por ello que lo primero será el crear el formulario, el cual tendrá tres elementos <input> que reflejarán los valores del multiplicando, el multiplicador y el resultado:
<form id="multiplicar"> <input type="text" id="multiplicando" value=0> X <input type="text" id="multiplicador" value=0> = <input type="text" id="resultado"> </form>
Por defecto hemos dado un valor de 0 a los campos. Aunque esto es opcional.
La idea es que cada vez que alguien modifique o bien el multiplicando o bien el multiplicador, el resultado cambie. Es por ello que tendremos que controlar el evento onChange sobre dichos campos. Este evento llamará a la función multiplicar, la cual codificaremos más adelante.
<form id="multiplicar"> <input type="text" id="multiplicando" value=0 onChange="multiplicar();"> X <input type="text" id="multiplicador" value=0 onChange="multiplicar();"> = <input type="text" id="resultado"> </form>
La función multiplicar() será el código JavaScript que realice la multiplicación. Esta función la deberemos de poner en la cabecera de la página HTML.
<HEAD>
<SCRIPT>
function multiplicar() {...}
</SCRIPT>
</HEAD>
Esta función, lo primero que hará sera ir a recuperar el valor de los elementos del formulario. Para ello nos apoyaremos en el DOM de los elementos de la página y en su función getElementById(identificador). El parámetro será el valor del atributo ID del elemento <input>.
Mucho cuidado con las mayúsculas y minúsculas de getElementById. Un pequeño error en esto hará quela función no funcione y nos volvamos locos buscando el error.
m1 = document.getElementById("multiplicando").value;
m2 = document.getElementById("multiplicador").value;
Esta función devolverá el elemento HTML en cuestión, es decir, el <input>. A si que habrá que acceder al valor del elemento con el .value.
Ahora ejecutamos la multiplicación. Veamosla línea de código:
r=m1*m2;
Y por último deberemos de asignar el valor al campo de resultado. Para ello volvemos a utilizar el getElementById(identificador).
document.getElementById("resultado").value = r;
De esta forma la función quedaría de la siguiente forma:
function multiplicar(){
m1 = document.getElementById("multiplicando").value;
m2 = document.getElementById("multiplicador").value;
r = m1*m2;
document.getElementById("resultado").value = r;
}
Artículos relacionados:
Enero 8, 2007 #
He probado su código, y me ha parecido estupendo.
Pero, ¿cómo sería el código si se da una cantidad prefijada a la que haya que multiplicar por un número? Es decir, en un listado de productos, el producto A vale 15,63€, si se multiplica por 3 (unidades) el resultado sería: 46,89€. Gracias.
Enero 12, 2007 #
Me parece muy buen ejemplo para explicar. Acabo de publicar el ejemplo de como hacerlo en Calculo de totales y subtotales en JavaScript.
Espero que sea de ayuda.
Agosto 4, 2008 #
esta mala la huea de codigo
Agosto 5, 2008 #
eso document.getElementById(“resultado”).value = r;
nooooooooooo
Agosto 5, 2008 #
una mierda de funsion
Noviembre 5, 2008 #
es una webada de codigo NO LO BAJEN no sirve no actualiza los totales sino sirve PARA Q MIERDA lo suben
Noviembre 20, 2010 #
pues ami me va de puta madre para un codeka peru que estoy haciendo..tengo esa funcion puesta en mi pagina de facturacion
Noviembre 14, 2011 #
Excelente!!! Simple, claro y efectivo. Muchas gracias por tu tiempo!
Noviembre 14, 2011 #
@Daniel, gracias por el comentario. Anima a continuar adelante.
Febrero 1, 2012 #
[...] Formulario que multiplica numeros en JavaScript [...]