Sintaxis del evento OnClick
En html
Aquí, los elementos pueden ser un botón o algo más. En el evento OnClick escribiremos un script o una función. El evento OnClick admite casi todos los elementos de HTML excepto , , ,
En JS
objeto.onClick = function () script;En JavaScript, asignaremos una función al evento OnClick. Dentro del paréntesis, escribiremos el script para realizar una tarea o función.
Ejemplo 1: Evento de OnClick para cambiar el color del texto
Cuando hacemos clic en un botón en un sitio web, el evento OnClick desencadena un cierto comportamiento. Esto puede ocurrir cuando enviamos formularios o datos en línea cuando modificamos contenido específico de la página web y otros eventos similares. Para practicar el evento OnClick en un entorno del mundo real, primero escribiremos un simple HTML con algo de estilo.
Hemos creado una página HTML simple en la que hay algún texto con un botón. Para estilizar la página hemos usado algunos CSS.
Cuando hacemos clic en el botón, tenemos la intención de hacer que el texto sea azul.
Después de escribir el método JavaScript para alterar el color, debemos agregar una propiedad OnClick a nuestro botón. Por lo tanto, debemos alterar ligeramente nuestro HTML:
Hemos agregado un evento OnClick dentro de la etiqueta de botón. Hemos asignado una función llamada ChangeColor () para ejecutar. Para el resultado, tenemos que crear un archivo JS para escribirlo en un archivo JavaScript o una etiqueta en un archivo HTML. Sin embargo, escribiremos nuestro script dentro del archivo HTML.
Primero, debemos elegir el elemento que deseamos modificar, que es el texto "Cambiar el color" contenido en el
etiqueta. Los métodos GetElementsByClassName (), GetElementById () o QuerySelector () de DOM en JavaScript se pueden usar para lograr esto. El valor se asigna luego a la variable. Usaremos QuerySelector () en este ejemplo porque está más actualizado y más rápido. Además, las variables se declararán utilizando estúpido. Es más seguro porque ayuda a hacer variables de solo lectura.
Ahora, dentro de la etiqueta de script, escribiremos nuestra función.
Como se vio anteriormente en HTML, la función que utilizaremos es Changecolor (). Esta es la razón por la cual Changecolor se establece como nuestro identificador de función (nombre). No funcionará si el nombre coincide con lo que hay en el HTML. En DOM para alterar cualquier cosa relacionada con el estilo, debe escribir "estilo" seguido de un punto (.). Luego se realiza la modificación que desea hacer, que podría ser el color, el color de fondo, el tamaño del texto, etc. Para acceder a nuestro texto "Cambiar el color", utilizaremos el nombre de la variable declarado en nuestra función, luego establecemos el color del texto en azul. Cuando presionamos el botón, el color del texto cambia al azul:
Al agregar más colores a nuestro texto, podríamos dar un paso más:
Entonces, lo que nos gustaría hacer es hacer la escritura de rojo naranja, verde y azul. Esta vez, las funciones de OnClick HTML aceptan los valores del color que deseamos aplicar al texto. En JavaScript, estos se denominan parámetros. Construiremos una función que acepte sus parámetros también. Los llamaremos "color". Nuestro sitio web ha sufrido cambios menores:
Entonces, elijamos nuestro texto de "Cambiar el color" e ingresemos el código para que sea rojo naranja, azul y verde:
El código de la función primero establece el color en lo que se suministró a las llamadas Changecolor () en los botones HTML después de recuperar la variable de nombre, que se usó para almacenar el texto "Cambiar el color."
Cuando presionamos uno de esos botones (azul, verde y naranja), el color del texto cambiará en consecuencia.
Ejemplo 2: Crear alertas usando el evento OnClick
En este ejemplo, creemos una página de la página web de muestra con un botón usando HTML. Cuando se presionará el botón, recibiremos un mensaje de alerta en la parte superior de la pantalla. Para crear una página web, utilizaremos el siguiente código:
Se creará una página web que consiste en un botón utilizando este código:
Ahora, tenemos que escribir una función JavaScript que se ejecutará para generar alertas. Creemos una función showalert () dentro de las etiquetas de script dentro del mismo código HTML como el siguiente:
Entonces, después de escribir el método JavaScript para alterar el color, debemos agregar una propiedad OnClick a nuestro botón. Por lo tanto, debemos alterar ligeramente nuestro HTML:
Actualizar este código agregará funcionalidad al botón. Cuando un usuario presiona el botón, la propiedad OnClick en el botón hace que la función showalert () se active. Los usuarios de teclado también pueden usar el evento OnClick. El aviso también se enviará si un usuario usa la tecla TAB para moverse al botón y luego presiona ENTER.
Como puede ver arriba, después de presionar el botón Mostrar alerta, recibimos un mensaje de alerta.
Para el elemento del botón, se puede agregar un nuevo estilo. Para modificar la apariencia del botón cuando los usuarios mouse sobre él o la pestaña del teclado, use las pseudo-clases de CSS (: Hover ,: Focus, y: Active).
El código anterior estilizará un botón. Es solo para la experiencia del usuario. Estilizar el botón no afectará la funcionalidad del botón.
Intente hacer clic en el botón después de diseñarlo. Si todo va de acuerdo con el plan, pasar el botón sobre el botón debería causar un cambio de estilo y, como antes, presionar el botón debería hacer que la alerta aparezca con su texto personalizado que se muestra. Para asegurarse de que también funcione para los usuarios de teclado, pruebe ahora sin un mouse.
Ejemplo 3: Evento OnClick para copiar el texto
También podemos copiar texto de un campo a otro utilizando el evento OnClick y una función JavaScript. Creemos una página HTML con dos campos de texto de entrada para que podamos escribir datos para copiar.
Tenemos que escribir la función dentro de las etiquetas de script para que podamos llamarlas usando el evento OnClick de la siguiente manera:
Después de actualizar el código, cuando presione el botón, el evento OnClick llamará a la función CopyTxt y el texto del campo Text1 se copiará en el campo Text2.
Conclusión
En este tutorial, hemos visto que cuando se hace clic en un elemento, el evento OnClick permite que un programador ejecute una función JavaScript. Podemos usarlo para muchas funcionalidades diferentes, como mensajes de advertencia y validación de formulario, etc. Implementamos tres ejemplos en esta publicación para mostrarle cómo puede cambiar el color del texto, cómo crear alertas y cómo copiar texto de un campo a otro utilizando el evento OnClick y las funciones de JavaScript.