A la hora de crear páginas, en ocasiones es necesario que al hacer clic en el botón colocado en la página, se produzca en el navegador algún evento programado por el autor. Para hacer esto, debe colocar el código JavaScript en el documento generado y vincularlo al botón requerido. Dependiendo de la cantidad de código que se requiera para implementar el evento deseado, puede usar diferentes formas de conectar el botón al código.
Instrucciones
Paso 1
La mayoría de las veces, las llamadas de código JavaScript están vinculadas al evento onclick, es decir, al clic del botón izquierdo del mouse. Si no necesita mucho código para describir la acción que debe suceder, entonces todo se puede colocar directamente en la etiqueta del botón. Por ejemplo, para programar el navegador para que muestre un mensaje simple cuando se hace clic en un botón, la secuencia de comandos de JavaScript se vería así: alerta ('¡El código funcionó!') Solo se necesita una declaración y texto. Todo esto se puede colocar fácilmente en la descripción del evento onclick de la etiqueta del botón. En este caso, el código HTML más simple de la página podría verse así:
Botón con código
Botón con código
Paso 2
No es práctico colocar código JavaScript más complejo directamente en la etiqueta del botón. Es más fácil hacer una función separada y poner su llamada en el evento onclick. Por ejemplo, esto podría parecer una función que muestra una ventana que contiene la hora en que se hace clic en un botón: function getTime () {
var ahora = nueva fecha ();
alert ("El código funcionó en" + now.getHours () + ":" + now.getMinutes ());
} Debe colocarse en el encabezado de la página (entre las etiquetas y). El código completo de la página con una llamada a esta función vinculada al botón puede verse así:
Botón de llamada de función
function getTime () {
var ahora = nueva fecha ();
alert ("El código funcionó en" + now.getHours () + ":" + now.getMinutes ());
}
Botón de llamada de función
Paso 3
Se debe usar el mismo método cuando al hacer clic en varios botones diferentes se debe generar un evento que se puede describir con el mismo código JavaScript. Por ejemplo, puede modificar ligeramente la función anterior para agregar la identificación del botón presionado al cuadro de mensaje: function getTime (btnString) {
var ahora = nueva fecha ();
alert (btnString + "hizo clic en" + now.getHours () + ":" + now.getMinutes ());
} El código completo de una página con tres de estos botones podría tener este aspecto:
Tres botones con llamada a función
function getTime (btnString) {
var ahora = nueva fecha ();
alert (btnString + "hizo clic en" + now.getHours () + ":" + now.getMinutes ());
}
Primer botón
Segundo botón
Tercer botón
