Botón HTML onclick: Tutorial de evento de clic en JavaScript

Artículo original escrito por: Kolade Chris
Artículo original: HTML Button onclick – JavaScript Click Event Tutorial
Traducido y adaptado por: Rafael D. Hernandez

Cada vez que visitas un sitio web, probablemente haces clic en algo como un enlace o un botón.

Los enlaces te llevan a una determinada parte de la página, a otra página del sitio web u otro sitio web en su totalidad. Los botones, por otro lado, generalmente son manipulados por eventos de JavaScript para que puedan activar cierta funcionalidad.

En este tutorial, vamos a explorar las dos formas diferentes de ejecutar eventos de clic en JavaScript utilizando dos métodos diferentes.

Primero, veremos el estilo tradicional de onclick que haces directamente desde la página HTML. Luego veremos cómo funciona el "click" eventListener más moderno, que te permite separar el HTML del JavaScript.

Cómo usar el evento onclick en JavaScript

El evento onclick ejecuta una cierta funcionalidad cuando se hace clic en un botón. Esto podría ocurrir cuando un usuario envía un formulario, cuando cambias cierto contenido de la página web y otras cosas por el estilo.

Coloca la función JavaScript que deseas ejecutar dentro de la etiqueta de apertura del botón.

Sintaxis básica de onclick

Por ejemplo

Ten en cuenta que el atributo onclick es puramente JavaScript. El valor que toma, que es la función que deseas ejecutar, lo dice todo, ya que se invoca directamente dentro de la etiqueta de apertura.

En JavaScript, invocas una función llamando a su nombre, luego colocas un paréntesis después del identificador de función (el nombre).

Ejemplo de evento onclick

He preparado un poco de HTML básico con un poco de estilo para que podamos poner el evento onclick en práctica en el mundo real.

Y aquí está el CSS para que se vea bien, junto con todo el resto del código de ejemplo:

Así, en la página web, esto es lo que tenemos:

Nuestro objetivo es cambiar el color del texto a azul cuando hacemos clic en el botón. Así que necesitamos agregar un atributo onclick a nuestro botón, luego escribir la función JavaScript para cambiar el color.

Así que necesitamos hacer un pequeño cambio en nuestro HTML:

La función que queremos ejecutar es cambiaColor(). Así que necesitamos escribirlo en un archivo JavaScript, o en el archivo HTML dentro de una etiqueta <script>.

Si deseas escribir tu script en un archivo JavaScript, debes vincularlo en el HTML utilizando la sintaxis a continuación:

Si deseas escribir el script en un archivo HTML, simplemente colócalo dentro de la etiqueta del script:

Ahora, escribamos nuestra función cambiaColor().

En primer lugar, debemos seleccionar el elemento que queremos manipular, que es el texto de freeCodeCamp dentro de la etiqueta <p>.

En JavaScript, lo haces con los métodos getElementById(), getElementsByClassName() o querySelector() del DOM. Después, almacenas el valor en una variable.

En este tutorial, usaré querySelector() porque es más moderno y más rápido. También usaré const para declarar nuestras variables en lugar de let y var, porque con const, las cosas son más seguras a medida que la variable se convierte en de solo lectura.

Ahora que tenemos el texto seleccionado, escribamos nuestra función. En JavaScript, la sintaxis de la función básica se ve así:

Así que vamos a escribir nuestra función:

¿Qué está pasando?

Recuerda del HTML que cambiaColor() es la función que vamos a ejecutar. Es por eso que nuestro identificador de función (nombre) se establece en cambiaColor. Si el nombre no se correlaciona con lo que está en el HTML, no funcionará.

En el DOM (Modelo de Objeto de documento, se refiere a todo el HTML), para cambiar cualquier cosa que se relacione con el estilo, debe escribir "estilo" y luego un punto (.). A esto le sigue lo que deseas cambiar, que puede ser el color, el color de fondo, el tamaño de fuente, etc.

Por lo tanto, dentro de nuestra función, tomamos la variable de nombre que declaramos para obtener nuestro texto de freeCodeCamp, luego cambiamos el color a azul.

El color de nuestro texto se vuelve azul cada vez que se hace clic en el botón:

¡Nuestro código funciona!

Podríamos llevar las cosas un poco más lejos cambiando nuestro texto a más colores:

Por lo tanto, lo que queremos hacer es cambiar el texto a azul, verde y rojo anaranjado.

Esta vez, las funciones onclick de nuestro HTML toman los valores del color al que queremos cambiar el texto. Estos se llaman parámetros en JavaScript. La función que escribiremos también toma la suya propia, a la que llamaremos "color".

Nuestra página web ha cambiado un poco:

Por lo tanto, seleccionemos nuestro texto de freeCodeCamp y escribamos la función para cambiar su color a azul, verde y rojo anaranjado:

El bloque de código en la función toma la variable name (donde almacenamos nuestro texto freeCodeCamp), luego establece el color a lo que pasamos a las funciones cambiarColor() en los botones HTML.

Cómo usar el eventListener de clic en JavaScript

En JavaScript, hay varias formas de hacer lo mismo. A medida que JavaScript evolucionó con el tiempo, empezamos a necesitar separar el código HTML, CSS y JavaScript para cumplir con las mejores prácticas.

Los oyentes de eventos lo hacen posible, ya que te permiten separar el JavaScript del HTML. También puedes hacer esto con onclick, pero tomemos otro enfoque aquí.

Sintaxis básica del eventListener

Ahora, cambiemos el texto de freecodecamp a azul mediante el oyente de eventos de clic.

Este es nuestro nuevo HTML:

Y así es como se ve:

Esta vez en nuestro script, también necesitamos seleccionar el botón (no solo el texto de FreeCodeCamp). Eso es porque no hay nada de JavaScript en la etiqueta de apertura de nuestro botón, lo cual es genial.

Entonces, nuestro guión se ve así:

También podemos separar su función totalmente del oyente de eventos y nuestra funcionalidad seguirá siendo la misma:

Cómo crear un botón "Mostrar más" y "Mostrar menos" con Javascript

Una de las mejores formas de aprender es haciendo proyectos, así que tomemos lo que hemos aprendido sobre eventListener onclick y "click" para construir algo.

Cuando visitas un blog, a menudo ves primero extractos de artículos. Luego puedes hacer clic en el botón "leer más" para mostrar el resto. Intentemos hacer eso.

Este es el HTML con el que estamos tratando:

Es HTML simple con algunos datos sobre freeCodeCamp. Y hay un botón al que ya conectamos un onclick. La función que queremos ejecutar es mostrarMas(), que escribiremos pronto.

Sin CSS, esto es lo que tenemos:

No es súper feo, pero podemos hacer que se vea mejor y actuar de la manera que queramos. Así que tenemos algunos CSS que explicaré a continuación:

¿Qué hace el CSS?

Con el selector universal ( * ), estamos eliminando el margen y el relleno predeterminados asignados a los elementos para que podamos agregar nuestro propio margen y relleno.

También tenemos el tamaño de caja establecido en border-box para que podamos incluir el relleno y el borde en el ancho y alto total de nuestros elementos.

Centramos todo en el cuerpo con Flexbox y le dimos un fondo gris claro.

Nuestro elemento <article>, que contiene el texto, tiene un ancho de 400px, un fondo blanco (#fff) y un relleno de 20px en la parte superior, 20 a la izquierda y a la derecha y 0 en la parte inferior.

Las etiquetas de párrafo en su interior tienen un tamaño de fuente de 18px, y luego les dimos una altura máxima de 270px. Debido a la altura máxima del elemento article, todo el texto no estará contenido y se desbordará. Para solucionar esto, establecemos desbordamiento en oculto para no mostrar ese texto al principio.

La propiedad transición garantiza que cada cambio ocurra después de 1 segundo. Todo el texto dentro del article está justificado y tiene un margen superior de 20 píxeles para que no se quede demasiado pegado a la parte superior de la página.

Debido a que eliminamos el margen predeterminado, nuestros párrafos se juntaron. Así que establecemos un margen inferior de 16 píxeles para separarlos unos de otros.

Nuestro selector, article.abierto, tiene una propiedad de max-height establecida en 1000px. Esto significa que cada vez que el elemento article tenga una clase de abierto adjunta, la altura máxima cambiará de 270px a 1000px para mostrar el resto del artículo. Esto es posible con JavaScript.

Diseñamos nuestro botón con un fondo oscuro y lo hicimos blanco. Establecimos su borde en ninguno para eliminar el borde predeterminado de HTML en los botones, y le dimos un radio de borde de 4px para que tenga un borde ligeramente redondeado.

Finalmente, usamos la pseudo-clase hover en CSS para cambiar el cursor del botón a un puntero. El color de fondo cambia ligeramente cuando un usuario pasa el cursor sobre él.

Ahí vamos, ese es el CSS.

Nuestra página ahora se ve mejor:

Lo siguiente que tenemos que hacer es escribir nuestro JavaScript para que podamos ver el resto del artículo que está oculto.

Tenemos un atributo onclick dentro de tu etiqueta de apertura de botón listo para ejecutar una función mostrarMas(), así que vamos a escribir la función.

Primero tenemos que seleccionar nuestro artículo, porque tenemos que mostrar el resto:

Lo siguiente que tenemos que hacer es escribir la función mostrarMas() para que podamos alternar entre ver el resto del artículo y ocultarlo.

¿Qué está haciendo la función?

Usamos una sentencia if ...else aquí. Esta es una parte crucial de JavaScript que le ayuda a tomar decisiones en su código si se cumple una determinada condición.

La sintaxis básica se ve así:

Aquí, si el nombre de la clase del artículo es igual a abierto (es decir, queremos agregarle la clase abieto, que se estableció en una altura máxima de 1000px en el CSS), entonces queremos ver el resto del artículo. De lo contrario, queremos que el artículo vuelva al estado inicial en el que una parte está oculta.

Hacemos esto asignándole una clase de abieto en el bloque else, lo que hace que muestre el resto del artículo. Luego establecemos la clase en una cadena vacía (ninguna) en el bloque if, lo que hace que vuelva al estado inicial.

Nuestro código funciona bien con una transición suave:

We can separate the HTML and JavaScript and still use onclick, because onclick is JavaScript. So it's possible to write this in a JavaScript file instead of starting from the HTML.

También podemos hacer esto usando un eventlistener:

¡Nuestra funcionalidad sigue siendo la misma!

Conclusion

Espero que este tutorial te ayude a entender cómo funciona el evento de clics en JavaScript. Aquí exploramos dos métodos diferentes, por lo que ahora puedes comenzar a usarlos en tus proyectos de codificación.

Gracias por leer y seguir codificando.