¿Cómo funciona el evento OnClick en JavaScript?

El "al hacer clicEl evento realiza una determinada funcionalidad cuando el usuario hace clic en un elemento HTML. Funciona en todos los tipos de elementos HTML excepto el , ,, , ,,, , , <br>, , y </strong> elementos.</p> <p>El "<strong>al hacer clic</strong>El evento se utiliza principalmente para la ejecución de la función JavaScript en el botón o elemento, haga clic. Permite a los usuarios llamar a una función JavaScript y realizar la acción especificada.</p> <p>Esta guía demostrará el objetivo y el funcionamiento del "<strong>al hacer clic</strong>"Evento en JavaScript.</p> <p>¿Cómo funciona el evento OnClick en JavaScript??</p> <p>El "<strong>al hacer clic</strong>"El evento permite la ejecución de la función JavaScript. Devuelve la salida de las funciones de JavaScript cuando el usuario hace clic en el elemento especificado.</p> <p>Sintaxis</p> <element onclick="function()">Hacer clic</element> <p>En la sintaxis anterior:</p> <ul> <li><strong>elemento</strong>: Especifica el elemento HTML particular como "<strong>P "," H2 "," H3</strong>" etc.</li> <li><strong>función()</strong>: Representa la función definida que se invocará en el activador del evento.</li> </ul> <p>La siguiente sección demostrará el funcionamiento del "<strong>al hacer clic</strong>"Evento con la ayuda de varios ejemplos.</p> <p>Ejemplo 1: Aplicar el evento "OnClick" para cambiar el color del texto del párrafo</p> <p>En este escenario, un "<strong>al hacer clic</strong>"El evento puede estar asociado con"<strong> <p>código HTML</p> <p>Primero, eche un vistazo al siguiente código HTML:</p> <h2 align="center"> Cambiar el color de texto usando el evento "OnClick"</p><br><p onclick="sample()"> Haga clic en este párrafo para cambiar su color.</p> <p>En el código HTML anterior:</p> <ul> <li>Primero, agregue un subtítulo del nivel 2 a través del "<strong><p></strong>"Etiqueta y establece su alineación en"<strong>centro</strong>".</li> <li>A continuación, incluya un párrafo que tenga un asociado "<strong>al hacer clic</strong>"Redirección de eventos a la función llamada"<strong>muestra()</strong>"Eso se activará en el clic del botón.</li> <li>Ahora, agregue el "<strong><p></strong>"Etiqueta que especifica un párrafo con una identificación"<strong>prueba</strong>" y "<strong>al hacer clic</strong>" evento.</li> <li>El "<strong>prueba</strong>"Muestra el párrafo que tiene un nuevo color de texto.</li> <li>El "<strong>al hacer clic</strong>"El evento redirige a la función"<strong>muestra()</strong>"Eso se activará en el párrafo clic.</li> </ul> <p>Código JavaScript</p> <p>Ahora, pasemos al bloque de código JavaScript:</p> <script><br>function sample() <br>document.getElementById("test").style.color = "green";<br><br></script> <p>En el bloque de código anterior:</p> <ul> <li>En primer lugar, declare una función llamada "<strong>muestra()</strong>".</li> <li>En su definición, aplique el "<strong>getElementById ()</strong>"Método para acceder al párrafo y cambiar su color de texto a través del"<strong>estilo.color</strong>"Propiedad al hacer clic en el párrafo.</li> </ul> <p>Producción</p> <p>La salida muestra el nuevo color actualizado del párrafo.</p> <p>Ejemplo 2: Aplicar el evento "OnClick" para cambiar el tamaño de fuente de texto y el color de fondo</p> <p>Este ejemplo aplica el "<strong>al hacer clic</strong>"Evento para personalizar el párrafo de modo que el texto"<strong>tamaño de fuente</strong>" y "<strong>color de fondo</strong>"De un párrafo se puede modificar en el activador del evento.</p> <p>código HTML</p> <p>Primero, siga el código HTML dado:</p> <h2 align="center"> Cambiar el color de fondo de texto usando el evento "OnClick"</p><br><p onclick="myfunc()"> Toque este encabezado para cambiar su tamaño de fuente y color de fondo</p> <p>En el código HTML anterior:</p> <ul> <li>El "<strong><p></strong>"Crea el nivel 2 I.mi., subtítulo alineado en "<strong>centro</strong>".</li> <li>El "<strong><p></strong>"Representa el párrafo que tiene un adjunto"<strong>al hacer clic</strong>"Evento acceder a la función JavaScript"<strong>myFunc ()</strong>".</li> </ul> <p>Código JavaScript</p> <p>Ahora, pase al siguiente código JavaScript:</p> <script><br>function myfunc() <br>document.getElementById("first").style.fontSize = "22px";<br>document.getElementById("first").style.backgroundColor = "yellow";<br><br></script> <p>En las líneas de código anteriores:</p> <ul> <li>Defina la función "<strong>myFunc ()</strong>".</li> <li>En su definición, el "<strong>documento.getElementById ()</strong>"El método obtiene el párrafo a través de su identificación dos veces y aplica el"<strong>tamaño de fuente</strong>" y "<strong>color de fondo</strong>Propiedades para modificar el párrafo en el activador del evento.</li> </ul> <p>Producción</p> <p>Como se ve, el "<strong>tamaño de fuente</strong>" y el "<strong>color de fondo</strong>"Del párrafo se han cambiado.</p> <p>Ejemplo 3: Aplicar el evento "OnClick" para copiar el valor del campo de entrada</p> <p>Aquí el "<strong>al hacer clic</strong>El evento se puede utilizar para copiar los datos del campo de entrada.</p> <p>código HTML</p> <p>Primero, verifique el código HTML establecido:</p> <h3 align="center"> Copie el campo de entrada usando el evento "OnClick"</p><br>Contraseña: <br><br>Volver a entrar en: <br><br><br><button onclick="result()">Copiar contraseña</button> <p>En el código HTML anterior:</p> <ul> <li>Del mismo modo, especifique el encabezado declarado alineado al centro.</li> <li>El ""Elemento llamado"<strong>Contraseña</strong>"De tipo"<strong>contraseña</strong>"Establece una contraseña que tiene el valor"<strong>Linuxhint12345</strong>"Con una identificación asignada"<strong>pasar</strong>". Mostrará el valor de contraseña mencionado en el campo de entrada.</li> <li>El segundo "<strong>Volver a entrar en</strong>"El campo de entrada también tiene un tipo"<strong>Contraseña</strong>"Con una identificación"<strong>pasar</strong>"Tener un atributo nulo" valor ".</li> <li>Además, crea un "<strong>botón</strong>" llamado "<strong>Copiar contraseña</strong>"Tener un adjunto"<strong>al hacer clic</strong>"Evento acceder a la función JavaScript"<strong>resultado()</strong>".</li> </ul> <p>Código JavaScript</p> <p>Ahora, describa el siguiente código JavaScript:</p> <script><br>function result() <br>document.getElementById("pass2").value = document.getElementById("pass1").value;<br><br></script> <p>En las líneas de código anteriores:</p> <ul> <li>Declarar la función "<strong>resultado()</strong>".</li> <li>En su definición, aplique el "<strong>documento.getElementById ()</strong>"Método dos veces para copiar el valor del primero"<strong>Contraseña</strong>"Campo a este último.</li> </ul> <p>Producción</p> <p>Como se analizó, el dado "<strong>Contraseña</strong>"Se ha copiado el valor al"<strong>Volver a entrar en</strong>"Campo de texto sobre el botón Haga clic.</p> <p>Ejemplo 4: Aplicar el evento "OnClick" para mostrar la fecha actual</p> <p>En este ejemplo, el evento discutido se puede utilizar para mostrar la fecha actual del sistema refiriéndose al párrafo.</p> <p>código HTML</p> <p>Vamos a ver el siguiente código HTML:</p> <h3 align="center"> Copie el campo de entrada usando el evento "OnClick"</p><br><button onclick="fun()">Haz click en eso</button><br> <p>En el código HTML anterior:</p> <ul> <li>Del mismo modo, incluya un "<strong><p></strong>"Subtítulo.</li> <li>En el siguiente paso, cree una etiqueta de botón que tenga una asociación "<strong>al hacer clic</strong>"Redirección de eventos a la función llamada"<strong>divertido()</strong>"Eso se activará en el clic del botón.</li> <li>Después de eso, el "<strong><p></strong>"Denota el párrafo nulo asignado una identificación"<strong>prueba</strong>"Para mostrar la fecha actual del sistema.</li> </ul> <p>Código JavaScript</p> <p>Ahora, pasemos al código JavaScript:</p> <script><br>function fun() <br>document.getElementById('test').innerHTML= Date();<br><br></script> <p>En las líneas de código anteriores:</p> <ul> <li>Una función llamada "<strong>divertido()</strong>" se define.</li> <li>En la definición de función, el "<strong>documento.getElementById ()</strong>"El método obtiene el párrafo a través de su"<strong>identificación</strong>"Y muestra la fecha utilizando el incorporado"<strong>Fecha()</strong>"Función y la"<strong>innerhtml</strong>" propiedad.</li> </ul> <p>Producción</p> <p>La salida anterior muestra la fecha actual del sistema al hacer clic en el botón.</p> <p>Conclusión</p> <p>JavaScript ofrece el incorporado "<strong>al hacer clic</strong>"Evento que desencadena una acción en el elemento HTML Haga clic. Invoca la función JavaScript para realizar la acción especificada en el activador del evento. Podría implementarse con el botón u otro elemento HTML como "<strong><p>","</strong>" etc. Esta publicación explicó el uso y la funcionalidad del "<strong>al hacer clic</strong>"Evento en 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/how-to-use-chrono-in-c">« Cómo usar Chrono en C++?</a></li> <li class="prev-next__item prev-next__item--right"><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></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/php">php</a> </div> <div class="white-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="white-news__text"> En PHP, substr_replace () es una función incorporada utilizada para reemplazar una parte de una cade... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-morales">Lorenzo Morales</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/ubuntu">Ubuntu</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-take-screenshots-from-the-login-shell--of-ubuntudebian-server">Cómo tomar capturas de pantalla del shell de inicio de sesión de Ubuntu/Debian Server</a> </div> <div class="white-news__text"> Tutorial práctico sobre cómo instalar el programa FBGRAB y cómo tomar capturas de pantalla de la int... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/daniela-villasenor">Daniela Villaseñor</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/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-install-and-use-oracle-virtualbox-extension-pack">Cómo instalar y usar Oracle Virtualbox Extension Pack?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mariana-cotto">Mariana Cotto</a> </div> </div> </div> </div> <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/python-write-string-to-file">Python escribe cadena en el archivo</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/daniela-villasenor">Daniela Villaseñor</a> </div> </div> </div> </div> <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/how-do-i-convert-an-exception-to-a-string-in-python">¿Cómo convierto una excepción a una cadena en 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/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/numpy-astype">Astype numpy</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/daniela-villasenor">Daniela Villaseñor</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/salesforce">Fuerza de ventas</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/salesforce-data-loader">Cargador de datos de Salesforce</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/homero-ontiveros">Homero Ontiveros</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-comparison-operators-in-powershell">Cómo usar operadores de comparación en PowerShell?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mariana-cotto">Mariana Cotto</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/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/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/c-programming">Programación C</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-find-the-ascii-value-of-a-character-in-c-programming">Cómo encontrar el valor ASCII de un personaje en la programación C?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/salvador-anaya">Salvador Anaya</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>