in

Evento onclick de JavaScript – javatpoint

javascript onclick event

los al hacer clic El evento generalmente ocurre cuando el usuario hace clic en un elemento. Permite al programador ejecutar una función de JavaScript cuando se hace clic en un elemento. Este evento se puede utilizar para validar un formulario, mensajes de advertencia y muchos más.

Con JavaScript, este evento se puede agregar dinámicamente a cualquier elemento. Es compatible con todos los elementos HTML excepto , , , </p> <style>, <script type="rocketlazyloadscript">, <base>, <iframe>, <bdo>, <br />, <meta>,</strong> y <strong><param></strong>. Significa que no podemos aplicar la <strong>al hacer clic</strong> evento en las etiquetas dadas.</p> <p>En HTML, podemos usar el <strong>al hacer clic</strong> atributo y asignarle una función de JavaScript. También podemos usar JavaScript <strong>addEventListener ()</strong> método y pasar un <strong>hacer clic</strong> evento para una mayor flexibilidad.</p> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63213" id="quads-ad63213" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63214" id="quads-ad63214" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <h3 class="h3">Sintaxis</h3> <p>Ahora, vemos la sintaxis de usar el <strong>al hacer clic</strong> evento en HTML y en javascript (sin <strong>addEventListener ()</strong> método o utilizando el <strong>addEventListener ()</strong> método).</p> <h3 class="h3">En HTML</h3> <p><textarea name="code" class="xml"><element onclick = "fun ()"> </textarea></p> <h3 class="h3">En JavaScript</h3> <p><textarea name="code" class="xml">object.onclick = function () {myScript}; </textarea></p> <h3 class="h3">En JavaScript mediante el método addEventListener ()</h3> <p><textarea name="code" class="xml">object.addEventListener ("clic", myScript); </textarea></p> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63213" id="quads-ad63213" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63214" id="quads-ad63214" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <p>Veamos cómo usar <strong>al hacer clic</strong> evento mediante el uso de algunas ilustraciones. Ahora, veremos los ejemplos de uso de <strong>al hacer clic</strong> evento en HTML y en JavaScript.</p> <h3 class="h3">Ejemplo 1: uso del atributo onclick en HTML</h3> <p>En este ejemplo, estamos usando HTML <strong>al hacer clic</strong> atributo y asignándole una función de JavaScript. Cuando el usuario hace clic en el botón dado, se ejecutará la función correspondiente y se mostrará un cuadro de diálogo de alerta en la pantalla.</p> <p><textarea name="code" class="xml"><! DOCTYPE html> <html> <head><meta charset="UTF-8"/> <script type="rocketlazyloadscript"> function fun () {alert ("Bienvenido a javaTpoint.com"); } </script> </head> <body> </p> <h3> Este es un ejemplo del uso del atributo onclick en HTML. </h3> <p> Haga clic en el siguiente botón para ver el efecto. </p> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63213" id="quads-ad63213" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63214" id="quads-ad63214" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <p> <button onclick = "fun ()"> Haz clic en mí </button> </body> </html><br /> </textarea></p> <p><span class="testit">Pruébelo ahora</span></p> <p><strong>Producción</strong></p> <p><img width="413" height="221" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20413%20221'%3E%3C/svg%3E" alt="Evento onclick de JavaScript" title="EVENTO ONCLICK DE JAVASCRIPT - JAVATPOINT 34" data-lazy-src="https://dhtrust.org/wp-content/uploads/2021/09/javascript-onclick-event.png"><noscript><img width="413" height="221" src="https://dhtrust.org/wp-content/uploads/2021/09/javascript-onclick-event.png" alt="Evento onclick de JavaScript" title="EVENTO ONCLICK DE JAVASCRIPT - JAVATPOINT 34"></noscript></p> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63213" id="quads-ad63213" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63214" id="quads-ad63214" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <p>Después de hacer clic en el botón dado, la salida será:</p> <p><img width="413" height="220" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20413%20220'%3E%3C/svg%3E" alt="Evento onclick de JavaScript" title="EVENTO ONCLICK DE JAVASCRIPT - JAVATPOINT 35" data-lazy-src="https://dhtrust.org/wp-content/uploads/2021/09/javascript-onclick-event2.png"><noscript><img width="413" height="220" src="https://dhtrust.org/wp-content/uploads/2021/09/javascript-onclick-event2.png" alt="Evento onclick de JavaScript" title="EVENTO ONCLICK DE JAVASCRIPT - JAVATPOINT 35"></noscript></p> <h3 class="h3">Ejemplo 2: uso de JavaScript</h3> <p>En este ejemplo, estamos usando JavaScript <strong>al hacer clic</strong> evento. Aquí estamos usando el <strong>al hacer clic</strong> evento con el elemento de párrafo.</p> <p>Cuando el usuario hace clic en el elemento de párrafo, se ejecutará la función correspondiente y se cambiará el texto del párrafo. Al hacer clic en el <strong></p> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63213" id="quads-ad63213" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <!-- WP QUADS Content Ad Plugin v. 2.0.30 --> <div class="quads-location quads-ad63214" id="quads-ad63214" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.2.0.30 Content AdSense async --> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script> <!-- end WP QUADS --> </div> <p></strong> elemento, el color de fondo, el tamaño, el borde y el color del texto también cambiarán.</p> <p><textarea name="code" class="xml"><! DOCTYPE html> <html> <head><meta charset="UTF-8"/> <title> evento onclick

Este es un ejemplo del uso del evento onclick.

Haga clic en el siguiente texto para ver el efecto.

Haga clic en mí


Pruébelo ahora

Producción

Evento onclick de JavaScript

Después de hacer clic en el texto Haz click en mi, la salida será -

Evento onclick de JavaScript

Example3 - Usando el método addEventListener ()

En este ejemplo, estamos usando JavaScript addEventListener () método para adjuntar un hacer clic evento al elemento de párrafo. Cuando el usuario hace clic en el elemento de párrafo, el texto del párrafo cambia.

Al hacer clic en el párrafo, el color de fondo y el tamaño de fuente de los elementos también cambiarán.

Pruébelo ahora

Producción

Evento onclick de JavaScript

Al hacer clic en el texto Haz click en mi, la salida será -

Evento onclick de JavaScript


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

img innerjoin

Palabra clave SQL INNER JOIN

model view controller

MVC Framework – Introducción