Hasta ahora siempre hemos asociado una función distinta para procesar
los eventos de distintos elementos HTML. Pero veremos que está
permitido asociar una único función a varios eventos de distintos
objetos.
Debemos definir un parámetro en la función a implementar que llega la referencia del objeto que emitió el evento.
Implementaremos un panel con un conjunto de botones que nos permitan ingresar un valor numérico presionando botones.
Asociaremos el click de cada botón con una única función.
Asociaremos el click de cada botón con una única función.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.addEventListener('load', inicio, false);
function inicio() {
for (var x = 0; x <= 9; x++) {
document.getElementById('boton' + x).addEventListener('click', presion, false);
}
}
function presion(evt) {
document.getElementById('resultado').innerHTML =
document.getElementById('resultado').innerHTML + evt.target.value;
}
</script>
<style>
.boton{
width:50px;
height:50px;
}
#resultado {
font-size:40px;
}
</style>
</head>
<body>
<input type="button" id="boton0" name="boton0" value="0" class="boton">
<input type="button" id="boton1" name="boton1" value="1" class="boton">
<input type="button" id="boton2" name="boton2" value="2" class="boton">
<input type="button" id="boton3" name="boton3" value="3" class="boton">
<input type="button" id="boton4" name="boton4" value="4" class="boton">
<input type="button" id="boton5" name="boton5" value="5" class="boton">
<input type="button" id="boton6" name="boton6" value="6" class="boton">
<input type="button" id="boton7" name="boton7" value="7" class="boton">
<input type="button" id="boton8" name="boton8" value="8" class="boton">
<input type="button" id="boton9" name="boton9" value="9" class="boton">
<br>
<div id="resultado"></div>
</body>
</html>
En el body definimos 10 botones y un div donde mostraremos todos los números ingresados.
<input type="button" id="boton0" name="boton0" value="0" class="boton"> <input type="button" id="boton1" name="boton1" value="1" class="boton"> <input type="button" id="boton2" name="boton2" value="2" class="boton"> <input type="button" id="boton3" name="boton3" value="3" class="boton"> <input type="button" id="boton4" name="boton4" value="4" class="boton"> <input type="button" id="boton5" name="boton5" value="5" class="boton"> <input type="button" id="boton6" name="boton6" value="6" class="boton"> <input type="button" id="boton7" name="boton7" value="7" class="boton"> <input type="button" id="boton8" name="boton8" value="8" class="boton"> <input type="button" id="boton9" name="boton9" value="9" class="boton"> <br> <div id="resultado"></div>
En el método inicio asociamos los diez botones con la función presion
y para reducir el código disponemos un for que se repita 10 veces y
llamamos en la misma al método addEventListener (debemos ir obteniendo
el id del botón concatenando 'boton' y el contador del for):
function inicio() {
for (var x = 0; x <= 9; x++) {
document.getElementById('boton' + x).addEventListener('click', presion, false);
}
}
Lo nuevo aparece en la función presion:
function presion(evt) {
document.getElementById('resultado').innerHTML =
document.getElementById('resultado').innerHTML + evt.target.value;
}
La función presion tiene un parámetro llamado evt (podemos darle
cualquier nombre) y el mismo es un objeto que tiene las siguientes
propiedades:
target: Referencia del objeto que generó el evento (en nuestro ejemplo alguno de los 10 botones) type: El nombre del evento (en nuestro caso click) button: El botón del mouse presionado (0 = izquierdo, 1 = medio, 2 = derecho) keyCode: El caracter del teclado presionado (en caso que corresponda) shiftKey: true o false en caso de estar presionada esta tecla.
Como en este problema debemos ir concatenando el número presionado
procedemos a obtener la referencia del div y asignarle el valor actual
más la propiedad value del botón presionado:
document.getElementById('resultado').innerHTML =
document.getElementById('resultado').innerHTML + evt.target.value;
No hay comentarios.:
Publicar un comentario