OnClick CSS

El botón o imagen de un objeto tiene un atributo llamado "OnClick."Cuando se hace clic en la imagen o un botón, se evalúa una expresión en ella. Los usuarios pueden hacer más que solo evaluar variables utilizando un evento OnClick. Además, se puede usar para definir un atributo de cualquier tipo de expresión. Además, podemos asignar un valor a una variable global con la ayuda del: = operador. Cuando el usuario presiona/hace clic en el elemento o el botón, se produce el evento OnClick. Al hacer clic/presionando el elemento, nos permite ejecutar el código JavaScript. Este evento también se puede usar para mostrar advertencias y validar formas, entre otras cosas.

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 , , , , , , , , <br>, , y . Significa que un evento de OnClick no se puede usar con estas etiquetas.</p> <p><strong>En JS</strong></p> objeto.onClick = function () script; <p>En JavaScript, asignaremos una función al evento OnClick. Dentro del paréntesis, escribiremos el script para realizar una tarea o función.</p> <p><strong>Ejemplo 1: Evento de OnClick para cambiar el color del texto</strong></p> <p>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.</p> <p>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.</p> <p>Cuando hacemos clic en el botón, tenemos la intención de hacer que el texto sea azul.</p> <p>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:</p> <p>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.</p> <p>Primero, debemos elegir el elemento que deseamos modificar, que es el texto "Cambiar el color" contenido en el <p> 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 <strong>estúpido</strong>. Es más seguro porque ayuda a hacer variables de solo lectura.</p> <p>Ahora, dentro de la etiqueta de script, escribiremos nuestra función.</p> <p>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:</p> <p>Al agregar más colores a nuestro texto, podríamos dar un paso más:</p> <p>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:</p> <p>Entonces, elijamos nuestro texto de "Cambiar el color" e ingresemos el código para que sea rojo naranja, azul y verde:</p> <p>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."</p> <p>Cuando presionamos uno de esos botones (azul, verde y naranja), el color del texto cambiará en consecuencia.</p> <p><strong>Ejemplo 2: Crear alertas usando el evento OnClick</strong></p> <p>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:</p> <p>Se creará una página web que consiste en un botón utilizando este código:</p> <p>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:</p> <p>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:</p> <p>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.</p> <p>Como puede ver arriba, después de presionar el botón Mostrar alerta, recibimos un mensaje de alerta.</p> <p>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).</p> <p>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.</p> <p>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.</p> <p><strong>Ejemplo 3: Evento OnClick para copiar el texto</strong></p> <p>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.</p> <p>Tenemos que escribir la función dentro de las etiquetas de script para que podamos llamarlas usando el evento OnClick de la siguiente manera:</p> <p>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.</p> <p><strong>Conclusión</strong></p> <p>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. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://es.cyberaxe.org/article/the-ipcs-linux-command-with-examples">« El comando IPCS Linux con ejemplos</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://es.cyberaxe.org/article/css-overflow-wrap">Envoltura de desbordamiento de CSS »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/powershell">Potencia Shell</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-are-the-steps-to-run-remote-commands-in-powershell">¿Cuáles son los pasos para ejecutar comandos remotos en PowerShell??</a> </div> <div class="white-news__text"> Los comandos remotos se pueden ejecutar habilitando el control remoto de PowerShell. Para habilitar ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/java">Java</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/java-method-examples">Ejemplos de métodos java</a> </div> <div class="white-news__text"> Tutorial sobre los métodos de Java, cómo usar los modificadores de acceso para establecer el alcance... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/mayte-mesa">Mayte Mesa</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/salesforce">Fuerza de ventas</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/salesforce-apex---map">Salesforce Apex - Mapa</a> </div> <div class="white-news__text"> Tutorial sobre el mapa Apex de Salesforce y sus métodos utilizados en escenarios de activación para ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/remove-special-characters-from-string-python">Eliminar caracteres especiales de String Python</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mayte-mesa">Mayte Mesa</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-css-flex-grow-property">Cómo usar la propiedad CSS Flex-Grow?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-canales">Lorenzo Canales</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/golang">golang</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Cómo convertir la cadena al tipo entero en Golang?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/powershell">Potencia Shell</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-the-get-service-command-in-powershell">Cómo usar el comando Get-Service en PowerShell</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-difference-between-aws-aurora-and-mysql">¿Cuál es la diferencia entre AWS Aurora y MySQL??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/powershell">Potencia Shell</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-the-sort-object-cmdlet-in-powershell">Cómo usar el cmdlet de oBject sort en PowerShell</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-melgar">Pilar Melgar</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/git">Git</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-generate-a-git-file-using-terminal--explained">Cómo generar un archivo git usando terminal? | Explicado</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-canales">Lorenzo Canales</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-php-strsplit-function">Cómo usar la función php str_split</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-canales">Lorenzo Canales</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-substrreplace-function-in-php">Cómo usar la función substr_replace en PHP</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-morales">Lorenzo Morales</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-switch-expression-in-c">¿Qué es la expresión del interruptor en C#?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sitio sobre el sistema operativo Linux. Aquí encontrará muchos artículos interesantes y guías útiles</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/python">Pitón</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/windows-os">OS de Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/docker">Estibador</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/r">Riñonal</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a></li> </li> <li class="menu-item"><a href="http://es.cyberaxe.org/all-categories"><b>Todas las categorias</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>