El uso de botones es una tarea muy común que se puede resolver con eventos de JavaScript. Prácticamente se puede usar eventos en cualquier elemento HTML pero los mas usados son input y button.
Los elementos mas usados son input type=button y button, aunque en realidad puedes usar cualquier elemento HTML.
Todos los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>
<input type=button value="titulo de boton" evento="valor"> <button evento="valor">titulo boton</button>
Nota que el texto que aparecerá en el boton input esta dado por el parametro value, en cambio en el elemento button el texto se pone entre la apertura y cierre del boton.
También es posible invocar a una función creada como Script, asi:
<Script>
funcion(){
...;
}
</Script>
<input type=button value="titulo del boton" evento="funcion();">
<Button evento="funcion();">titulo del boton</Button>
Existen cinco (5) posibles eventos a usar, aunque de lejos en mas usado en onClick.
Ejecute un JavaScript cuando se hace clic en un elemento HTML.
<input type=button value="titulo de boton" onClick="funcion()"> <button onClick="funcion()">titulo boton</button>
Con este ejemplo escribimos la fecha y hora de hoy en un elemento identificado con id=resp.
<button onclick="getElementById('resp').innerHTML=Date()">Que hora es ?</button>
<p id=resp>...</p>
...
Ejecuta JavaScript cuando usario pasa el mouse sobre el elemento HTML.
Ejecuta JavaScript cuando usario abandona un campo input
<input type=button value="titulo de boton" onBlur="valor"> <button onBlur="valor">titulo boton</button>
Soportado por todas las etiquetas menos: <br>, <style> <script>
<script>
var x = document.getElementById("mi");
x.addEventListener("focusin", pone);
x.addEventListener("focusout", saca);
function pone() {
document.getElementById("mi").style.backgroundColor = "yellow";
}
function saca() {
document.getElementById("mi").style.backgroundColor = "";
}
</script>
La definición del type=text debe ser antes del script para que pueda activar los eventos.
Evento que se ejecuta cuando el elemento HTML obtiene el foco. También se puede usar los eventos: focusin y focusout
<input type=button value="titulo de boton" onFocus="valor"> <button onFocus="valor">titulo boton</button>
<input type=text onFocusin="this.style.backgroundColor='yellow'" onFocusout="this.style.backgroundColor=''">
Este evento se dispara cuando sobre un elemento HTML se presiona un boton con el puntero dentro de el.
<input type=button value="titulo de boton" onMouseDown="valor"> <button onMouseDown="valor">titulo boton</button>
El evento onClick se dispara después de que se produce una acción de clic completo; es decir, se presiona y suelta el botón del mouse mientras el puntero permanece dentro del mismo elemento HTML. onMouseDown se dispara en el momento en que se presiona inicialmente el botón.
Este evento se dispara cuando sobre un elemento HTML se suelta un boton con el puntero dentro de el.
<input type=button value="titulo de boton" onMouseUp="valor"> <button onMouseUp="valor">titulo boton</button>
| Método | Descripción |
|---|---|
| click | Simula un clic de mouse en el boton. |
| focus | Le da el foco al boton. |
| blur | Le quita el foco al boton. |
| handleEvent | Invoca el controlador para el evento especificado. |
Además, este objeto hereda los métodos watch y unwatch de Object.
Conjunto de ejemplos
El siguiente ejemplo crea un boton llamado calcBtn. El texto "Calcular" es mostrado en la cara del boton. Cuando el boton es clickeado, la funcion calcFunction es invocada.
<INPUT TYPE=button VALUE=Calcular NAME=calcBtn onClick=calcFunction(this.form)>
En este ejemplo el formulario "miForm" contiene un campo texto y un botón. Cuando haces clic sobre el botón se acciona el evento onClick que usa this.form.name para hacer referencia a "miForm1" y ponerlo como valor en el campo texto.
<form name=miForm1> Campo texto: <input type=text name=texto> <input type=button value='Muestra nombre del formulario' onClick='this.form.texto.value=this.form.name'> </form>
El siguiente ejemplo se muestra un formulario con varios elementos. Cuando el usuario hace clic en el botón2, la función showElements muestra un cuadro de diálogo de alerta que contiene los nombres de cada elemento en el formulario "myForm2".
<script>
function showElements(theForm) {
str = "Elementos del formulario " + theForm.name + ":\n"
for (i=0; i<theForm.length; i++){
str += i + " " + theForm.elements[i].name + "\n"
}
alert(str)
}
</script>
<form name=myForm2>
Muestra aqui: <INPUT TYPE=text NAME=texto>
<INPUT TYPE=button NAME=boton1 VALUE="Muestra nombre del formulario" onClick="this.form.texto.value=this.form.name">
<INPUT TYPE=button NAME=boton2 VALUE="Muestra elementos del formulario" onClick="showElements(this.form)">
</form>
Si varios objetos en el mismo formulario tienen el mismo atributo NAME, se crea automáticamente una matriz del nombre dado. Cada elemento de la matriz representa un objeto Form individual. Los elementos se indexan en orden de origen a partir de 0. Por ejemplo, si dos elementos Text y un elemento Button estan en el mismo formulario tienen su atributo NAME establecido en "miCampo", una matriz con los elementos miCampo de 3 elementos: miCampo[0], miCampo[1], y miCampo[2]. Debe conocer esta situación en su código y saber si miCampo se refiere a un solo elemento o a una matriz de elementos.
Para invocar una nueva pagina se puede usar window.open() o window.location.href=.
<button onClick="window.location.href='index.htm'">Titulo</button>
<input type=button value=Guardar onClick=window.open('index.htm')>
<input type=button value=Guardar onClick=window.open('index.htm','_self')>
Para cerrar la ventana actual puedes usar window.close() o window.history.back().
<button onClick='window.close()'>Regresar</button> <input type=button value=Regresar onClick=window.history.back()>
Solo se puede cerrar ventanas que hubiesen sido abiertas desde JavaScrip.
En el siguiente ejemplo, la función valueGetter usa un bucle for para iterar sobre la matriz de elementos en el formulario valueTest. La ventana msgWindow muestra los nombres de todos los elementos en el formulario:
function valueGetter() {
var msgWindow=window.open("")
for (var i=0; i<newWindow.document.valueTest.elements.length; i++) {
msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<br>")
}
}
En el siguiente ejemplo, la primera instrucción crea una ventana llamada netscapeWin. La segunda instrucción muestra el valor "netscapeHomePage" en el cuadro de diálogo Alerta, porque "netscapeHomePage" es el valor del argumento windowName de netscapeWin.
Para todos los objetos Button, el valor de la propiedad type es "button". Esta propiedad especifica el tipo del elemento de formulario.
En el siguiente ejemplo escribimos el valor de la propiedad type en un nuevo formulario.
For (var i=0; i<document.form1.elements.length; i++) {
document.writeln("<BR>type is " + document.form1.elements[i].type)
}
No confundir el valor de la propiedad con el nombre de la propiedad. El nombre de la propiedad no es presentado en pantalla, solo es usada de referencia
La siguiente función evalúa las propiedades de un grupo de botones y los muestra en pantalla.
function valueGetter() {
var msgWindow=window.open("")
msgWindow.document.write("submitButton.value is " +
document.valueTest.submitButton.value + "<br>")
msgWindow.document.write("resetButton.value is " +
document.valueTest.resetButton.value + "<br>")
msgWindow.document.write("helpButton.value is " +
document.valueTest.helpButton.value + "<br>")
msgWindow.document.close()
}
El ejemplo anterior asume que el boton fue definido asi:
<INPUT TYPE=submit NAME=Enviar> <INPUT TYPE=reset NAME=Resetear> <INPUT TYPE=button NAME=Ayuda VALUE=Ayuda>
En el siguiente ejemplo tenemos un select con los meses del año y si damos clic al boton se selecciona el mas actual.
En este ejemplo la variable m existe porque fue creada desde un script asi: hoy = new Date(); n = hoy.getMonth() + 1;