¿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/golang">golang</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-strings-replace-function-in-golang---examples">Cómo usar cuerdas.Reemplazar la función en Golang - Ejemplos</a> </div> <div class="white-news__text"> Las cuerdas.La función reemplazar () en Golang reemplaza todas las ocurrencias de una subcadena dent... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/jacobo-pina">Jacobo Piña</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-difference-between-int-and-double-in-c">¿Cuál es la diferencia entre int y double en c#?</a> </div> <div class="white-news__text"> Los enteros (int) son números enteros, lo que significa que no tienen puntos decimales. Los dobles (... </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/c-programming">Programación C</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-is-file-handling-in-c-programming">¿Qué es el manejo de archivos en la programación C??</a> </div> <div class="white-news__text"> El manejo de archivos es un aspecto esencial de la programación C que permite a los desarrolladores ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-morales">Lorenzo Morales</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/python-os-path-expanduser-method">Python OS.camino.método expandido</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/windows-os">OS de Windows</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-difference-between-windows-top-10-home-and-pro">¿Cuál es la diferencia entre Windows Top 10 Home y Pro</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/java">Java</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-byte-keyword-in-java">Cómo usar la palabra clave de byte en java</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/carolina-guzman">Carolina Guzmán</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-use-time-now-function-in-golang---examples">Cómo usar el tiempo.Ahora funcione en Golang - Ejemplos</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-aws-control-tower-and-how-to-use-it">¿Qué es la torre de control de AWS y cómo usarla??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jacobo-pina">Jacobo Piña</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/can-you-explain-the-functionality-of-powershells-get-location-command">¿Puedes explicar la funcionalidad del comando de ubicación de PowerShell??</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> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-find-oracle-service-name">Cómo encontrar el nombre del servicio Oracle?</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> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-are-sqlite-and-sqlite3-are-they-the-same">¿Qué son SQLite y SQLite3?? Son lo mismo?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jacobo-pina">Jacobo Piña</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/if-else-statement-in-c-programming">Declaración if-else en la programación C</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/hernan-delao">Hernán Delao</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-switch-statement-in-c">Cómo usar la instrucción Switch en C++?</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> <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>