HTML Button onclick con JavaScript - Tutoial del evento click
Este artículo te enseñará cómo hacer clic en un botón y llamar una función JavaScript mediante el evento onclick.
Conozcamos qué es js, la forma más popular de escribir código para web. Aunque se utiliza mucho, también hay otros lenguajes como PHP, Python, etc.
¿Qué es el evento onclick en HTML?
El evento onclick (también conocido como js onclick) es un atributo de HTML que permite ejecutar una acción cuando se hace clic en un elemento, como un botón, una imagen o cualquier otro elemento que sea clickable. Este evento es fundamental para interactuar con el usuario y realizar acciones según las necesidades del proyecto.
Al hacer clic en un botón, por ejemplo, puedes llamar a una función JavaScript previamente definida para ejecutar alguna acción, lo cual permite mantener el código separado de la lógica de negocio.
La forma tradicional de utilizar onclick en JavaScript
Para ejecutar una función cuando se hace clic en un botón, puedes escribir el código directamente dentro de la etiqueta HTML del botón. Esto implica incluir el atributo onclick con el nombre de la función a ejecutar entre paréntesis.
html
<button onclick="miFuncion()">Hacer clic</button>
En esta forma, se considera como un código "inline" donde el script y su respectivo estilo se mezclan directamente en la etiqueta HTML. Por ejemplo, si deseas cambiar el color del texto a azul cuando se hace clic en el botón, puedes escribir algo así:
```html
```
Pero recuerda que aunque esto funciona, no es lo más adecuado o moderno ya que mezcla el código de la página.
El método moderno de utilizar eventos en JavaScript
consiste en separar el HTML del Javascript mediante la declaración de una función independiente y luego asignarla a un escuchador de eventos. Esto te permite mantener tu código organizado y fácilmente mantenible.
Para implementar esto, crea primero la función que deseas ejecutar cuando se haga clic en el botón. Por ejemplo, si deseas cambiar el color del texto al hacer clic en un botón, puedes declarar una función como esta:
function cambioDeColor() {
document.getElementById('miBoton').style.color = 'blue';
}
Luego, para llamar a dicha función desde la etiqueta HTML, necesitarás utilizar el método onclick js de manera diferente al método tradicional. En lugar de escribir el código directamente en la etiqueta HTML como antes ( onclick="cambioDeColor()" ), ahora se realiza mediante una declaración separada. Por ejemplo:
```
```
Este método es más limpio y fácil de mantener, especialmente cuando trabajas con aplicaciones más complejas que requieren múltiples funciones para cada evento.
Declarar una función en JavaScript y llamarla mediante su nombre
Una vez que has entendido cómo funciona el evento onclick, podemos empezar a declarar funciones para ejecutarlas cuando se haga clic en un botón. En JavaScript, puedes declarar una función de la siguiente manera:
javascript
function cambiarColor() {
document.getElementById("boton").style.color = "azul";
}
En este ejemplo, se declara una función llamada cambiarColor que cambia el color del texto a azul. Para llamar esta función cuando se hace clic en un botón, debes asignarla al atributo onclick del botón:
html
<button id="boton" onclick="cambiarColor()">Clic me</button>
El id de la etiqueta <button> debe coincidir con el selector utilizado en la función para acceder y modificar su estilo.
Ejemplo de cambio de color de texto al hacer clic en un botón
Para cambiar el color del texto cuando se hace clic en un botón, podemos utilizar la propiedad onclick en JavaScript. En primer lugar, creamos una etiqueta HTML con el botón y le asignamos el evento de click mediante su método tradicional:
```html
``
Aquí, en la etiqueta HTML, el botón está configurado para llamar a la función
En el script JavaScript definimos la función con el nombre que le asignamos (cambiarColor), y ejecutamos ese código para cambiar al texto azul.
javascript
function cambiarColor() {
document.write("<font color='azul'>Texto en azul</font>");
}
La palabra clave js se ha utilizado como atributo de la etiqueta script, indicando que es un archivo JavaScript. La propiedad onclick y la función llamada dentro del atributo son claves en este ejemplo.
Si ejecutamos el código, el resultado será visualmente evidente, ya que cambiará el color del texto a azul cuando se haga clic sobre él.
Añadir efectos visuales con el evento click
Cuando trabajamos con botones HTML, nos surge la necesidad de hacer que ocurran cosas cuando se hacen clic en ellos. Esto es donde entra en juego el onclick js, un atributo que permite ejecutar una función JavaScript al hacer clic.
Encontrando nuestro lugar: Antes de empezar a escribir código, debemos asegurarnos de declarar nuestra función JavaScript adecuadamente. Por ejemplo, si tenemos la función "cambiarColor" para cambiar el color del texto, podemos definirla en un script JavaScript.
javascript
function cambiarColor() {
document.getElementById("texto").style.color = "azul";
}
Luego, simplemente debemos llamar a esta función desde el botón haciendo clic. Podemos hacer esto utilizando el evento onclick y llamando al nombre de nuestra función. Por ejemplo:
html
<button onclick="cambiarColor()">Haz clic aquí</button>
Al hacer clic en el botón, ahora nuestro texto cambiará a azul porque la función cambiarColor fue ejecutada correctamente.
Utilizar imágenes y otros elementos en el evento click
Además de cambiar texto o ejecutar scripts, también puedes utilizar imágenes como respuesta a un click sobre un botón en js. Esto se puede hacer usando la propiedad "src" dentro del atributo onclick, donde estás llamando tu función.
Ejemplo:
```
```
Otra forma es utilizar el evento onclick y dentro de él, llamar a otra función que haga lo necesario. Por ejemplo:
```
```
Pasando parámetros a la función en onclick
A medida que se vuelve más común el uso del código js directamente dentro de las etiquetas HTML, también es importante aprender a pasar parámetros a las funciones para poder reutilizar el código y hacerlo más escalable. Para hacer esto, simplemente puedes agregar los parámetros separados por coma entre la función y el valor.
Ejemplo: <button onclick="miFuncion('Hola Mundo', 123)">Click me</button>
En este ejemplo, la función miFuncion se llama con dos parámetros, un string 'Hola Mundo' y un número 123. De esta manera, puedes personalizar aún más los resultados de tu botón al hacer clic en él.
Para hacer esto desde el código js, simplemente debes cambiar el método tradicional de escritura del atributo onclick por la sintaxis de escuchador de eventos:
```javascript
// Obtener la referencia del elemento HTML
var boton = document.getElementById('miBoton');
// Definir la función que se ejecutará al hacer clic en el botón
boton.addEventListener('click', function() {
miFuncion('Hola Mundo desde js', 123);
});
```
En este caso, se obtiene la referencia del elemento HTML utilizando document.getElementById, y luego se agrega un escuchador de eventos para capturar el evento click. Cuando se haga clic en el botón, se ejecutará la función con los parámetros que hayas definido.
¡Espero que esto te ayude a entender mejor cómo pasar parámetros a las funciones en tu código js!
Conclusión
El uso del evento onclick js es una herramienta poderosa para interactuar con elementos HTML de manera dinámica. A través de este tutorial, hemos cubierto dos formas de implementar este evento: la forma tradicional y la moderna utilizando escuchadores de eventos.
Al aprender a utilizar el evento onclick js, puedes crear experiencias de usuario más personalizadas y divertidas en tus páginas web. Puedes aplicarlo para realizar una variedad de acciones, desde simples cambios de estilo hasta llamadas a funciones complejas.
Al seguir los pasos y ejemplos proporcionados en este tutorial, podrás dominar el uso del evento onclick js y llevar tu habilidad como desarrollador front-end a un nivel superior. ¡No dudes en experimentar y personalizar aún más tus proyectos con esta herramienta poderosa!
Si quieres conocer otros artículos parecidos a HTML Button onclick con JavaScript - Tutoial del evento click puedes visitar la categoría Programacion.
Deja una respuesta
Contenido que te pude interesar