Formulario que multiplica numeros en JavaScript Diciembre 20, 2006
Publicado por lineadecodigo en : JavaScript , trackbackUna 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;
}
| 
| 5671 visitas
(1 votos, media: 4 de 5)
Loading ...
Comentarios»
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.
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.
esta mala la huea de codigo
eso document.getElementById(”resultado”).value = r;
nooooooooooo
una mierda de funsion