Botones

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.

1. Uso de botones

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>

2. Eventos

Existen cinco (5) posibles eventos a usar, aunque de lejos en mas usado en onClick.

2.1. 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>

...

2.2. onBlur

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.

2.3. onFocus

Evento que se ejecuta cuando el elemento 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=''">

2.4. onMouseDown

<input type=button value="titulo de boton" onMouseDown="valor">
<button onMouseDown="valor">titulo boton</button>

2.5. onMouseUp

<input type=button value="titulo de boton" onMouseUp="valor">
<button onMouseUp="valor">titulo boton</button>

3. Métodos

Metodos
MetodoDescripcion
blurLe quita el foco al boton.
clickSimula un clic de mouse en el boton.
focusLe da el foco al boton.
handleEventInvokes the handler for the specified event.
In addition, this object inherits the watch and unwatch methods from Object

4. Ejemplos

Conjunto de ejemplos

4.1 Ejemplo 1

El siguiente ejemplo crea un boton llamado calcButton. El texto "Calculate" es mostrado en la cara del boton. Cuando el boton el clickeado, la funcion calcFunction es invocada.

<INPUT TYPE=button VALUE="Calculate" NAME="calcButton" onClick="calcFunction(this.form)">

4.2 Ejemplo 2

En este ejemplo el formulario "myForm1" 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 "myForm1" y ponerlo como valor en el campo texto.

<form name=myForm1>
Campo texto: <input type=text name=texto>
<input type=button value='Muestra nombre del formulario' onClick='this.form.texto.value=this.form.name'>
</form>

Campo texto:

4.3 Ejemplo 3

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>

Muestra aqui:

4.4 Ejemplo 4

Para invocar una nueva pagina.

<button onClick="window.location.href='index.htm'">Titulo</button>

4.5 Ejemplo 5

Para cerrar la ventana actual puedes usar window.close().

<button onClick='window.close()'>Titulo</button>

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 l3l3m3ntos: 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.

4.6 Ejemplo 6

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.

4.7 Ejemplo 7

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

4.8 Ejemplo 8

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>