Come funziona Event OnClick in JavaScript

Artemide Ricci

IL "al clic"L'evento esegue una determinata funzionalità quando l'utente fa clic su un elemento HTML. Funziona su tutti i tipi di elementi HTML tranne il , ,, , ,,, , , <br>, , E </strong> elementi.</p> <p>IL "<strong>al clic</strong>"L'evento viene utilizzato principalmente per l'esecuzione della funzione JavaScript sul pulsante o sull'elemento Fare clic su. Consente agli utenti di chiamare una funzione JavaScript ed eseguire l'azione specificata.</p> <p>Questa guida dimostrerà l'obiettivo e il funzionamento del "<strong>al clic</strong>"Evento in JavaScript.</p> <p>Come funziona Event OnClick in JavaScript?</p> <p>IL "<strong>al clic</strong>"L'evento consente l'esecuzione della funzione JavaScript. Restituisce l'output delle funzioni JavaScript quando l'utente fa clic sull'elemento specificato.</p> <p>Sintassi</p> <element onclick="function()">Clic</element> <p>Nella sintassi sopra:</p> <ul> <li><strong>elemento</strong>: Specifica il particolare elemento HTML come "<strong>P "," H2 "," H3</strong>" eccetera.</li> <li><strong>funzione()</strong>: Rappresenta la funzione definita che verrà invocata nel trigger dell'evento.</li> </ul> <p>La sezione seguente dimostrerà il funzionamento del "<strong>al clic</strong>"Evento con l'aiuto di vari esempi.</p> <p>Esempio 1: applicare l'evento "OnClick" per modificare il colore del testo del paragrafo</p> <p>In questo scenario, un "<strong>al clic</strong>"L'evento può essere associato a"<strong> <p>Codice HTML</p> <p>Innanzitutto, dai un'occhiata al seguente codice HTML:</p> <h2 align="center"> Modifica il colore del testo usando l'evento "OnClick"</p><br><p onclick="sample()"> Fai clic su questo paragrafo per cambiarne il colore.</p> <p>Nel codice HTML sopra:</p> <ul> <li>Innanzitutto, aggiungi un sottotitolo di livello 2 tramite "<strong><p></strong>"Tag e imposta il suo allineamento su"<strong>centro</strong>".</li> <li>Successivamente, includi un paragrafo che ha un associato "<strong>al clic</strong>"Reindirizzamento dell'evento alla funzione denominata"<strong>campione()</strong>"Verrà attivato sul clic del pulsante.</li> <li>Ora aggiungi il "<strong><p></strong>"Tag che specifica un paragrafo con un ID"<strong>test</strong>" E "<strong>al clic</strong>"Evento.</li> <li>IL "<strong>test</strong>"Visualizza il paragrafo con un nuovo colore di testo.</li> <li>IL "<strong>al clic</strong>"L'evento reindirizza alla funzione"<strong>campione()</strong>"Verrà attivato al clic del paragrafo.</li> </ul> <p>Codice JavaScript</p> <p>Ora, passiamo al blocco del codice JavaScript:</p> <script><br>function sample() <br>document.getElementById("test").style.color = "green";<br><br></script> <p>Nel blocco del codice sopra:</p> <ul> <li>Prima di tutto, dichiarare una funzione chiamata "<strong>campione()</strong>".</li> <li>Nella sua definizione, applica il "<strong>getElementById ()</strong>"Metodo per accedere al paragrafo e modificare il colore del testo tramite"<strong>stile.colore</strong>"Proprietà facendo clic sul paragrafo.</li> </ul> <p>Produzione</p> <p>L'output mostra il nuovo colore aggiornato del paragrafo.</p> <p>Esempio 2: applicare l'evento "OnClick" per modificare la dimensione del carattere di testo e il colore di sfondo</p> <p>Questo esempio applica il "<strong>al clic</strong>"Evento per personalizzare il paragrafo in modo tale che il testo"<strong>dimensione del font</strong>" E "<strong>colore di sfondo</strong>"Di un paragrafo può essere modificato al trigger dell'evento.</p> <p>Codice HTML</p> <p>Innanzitutto, segui il codice HTML dato:</p> <h2 align="center"> Modifica il colore dello sfondo del testo usando l'evento "OnClick"</p><br><p onclick="myfunc()"> Tocca questa intestazione per cambiare il suo carattere e il colore di sfondo</p> <p>Nel codice HTML sopra:</p> <ul> <li>IL "<strong><p></strong>"Crea il livello 2 i.e., sottotitolo allineato a "<strong>centro</strong>".</li> <li>IL "<strong><p></strong>"Rappresenta il paragrafo con un allegato"<strong>al clic</strong>"Evento che accede alla funzione JavaScript"<strong>myfunc ()</strong>".</li> </ul> <p>Codice JavaScript</p> <p>Ora, passa al seguente codice JavaScript:</p> <script><br>function myfunc() <br>document.getElementById("first").style.fontSize = "22px";<br>document.getElementById("first").style.backgroundColor = "yellow";<br><br></script> <p>Nelle righe di codice sopra:</p> <ul> <li>Definire la funzione "<strong>myfunc ()</strong>".</li> <li>Nella sua definizione, il "<strong>documento.getElementById ()</strong>"Il metodo prende il paragrafo tramite il suo ID due volte e applica il"<strong>dimensione del font</strong>" E "<strong>colore di sfondo</strong>"Proprietà per modificare il paragrafo sul trigger dell'evento.</li> </ul> <p>Produzione</p> <p>Come visto, il "<strong>dimensione del font</strong>" e il "<strong>colore di sfondo</strong>"Del paragrafo sono stati cambiati.</p> <p>Esempio 3: applicare l'evento "OnClick" per copiare il valore del campo di input</p> <p>Qui, il "<strong>al clic</strong>"L'evento può essere utilizzato per copiare i dati sul campo di input.</p> <p>Codice HTML</p> <p>Innanzitutto, controlla il codice HTML dichiarato:</p> <h3 align="center"> Copia il campo di input usando l'evento "OnClick"</p><br>Parola d'ordine: <br><br>RIPETTERE: <br><br><br><button onclick="result()">Copia password</button> <p>Nel codice HTML sopra:</p> <ul> <li>Allo stesso modo, specificare l'intestazione dichiarata allineata al centro.</li> <li>IL ""Elemento chiamato"<strong>Parola d'ordine</strong>"Di tipo"<strong>parola d'ordine</strong>"Imposta una password con il valore"<strong>Linuxhint12345</strong>"Con un ID assegnato"<strong>Pass1</strong>". Visualirà il valore della password menzionato nel campo di input.</li> <li>Il secondo "<strong>Rientrare</strong>"Il campo di input ha anche un tipo"<strong>Parola d'ordine</strong>"Con un ID"<strong>Pass2</strong>"Avere un attributo" valore "nulla.</li> <li>Inoltre, crea un "<strong>pulsante</strong>" di nome "<strong>Copia password</strong>"Avere un allegato"<strong>al clic</strong>"Evento che accede alla funzione JavaScript"<strong>risultato()</strong>".</li> </ul> <p>Codice JavaScript</p> <p>Ora, panoramica il seguente codice JavaScript:</p> <script><br>function result() <br>document.getElementById("pass2").value = document.getElementById("pass1").value;<br><br></script> <p>Nelle righe di codice sopra:</p> <ul> <li>Dichiarare la funzione "<strong>risultato()</strong>".</li> <li>Nella sua definizione, applica il "<strong>documento.getElementById ()</strong>"Metodo due volte per copiare il valore dal primo"<strong>Parola d'ordine</strong>"Campo a quest'ultimo.</li> </ul> <p>Produzione</p> <p>Come analizzato, il dato "<strong>Parola d'ordine</strong>"Il valore è stato copiato al"<strong>Rientrare</strong>"Campo di testo sul clic del pulsante.</p> <p>Esempio 4: applicazione dell'evento "OnClick" per visualizzare la data corrente</p> <p>In questo esempio, l'evento discusso può essere utilizzato per visualizzare la data corrente del sistema facendo riferimento al paragrafo.</p> <p>Codice HTML</p> <p>Panoramiamo il seguente codice HTML:</p> <h3 align="center"> Copia il campo di input usando l'evento "OnClick"</p><br><button onclick="fun()">Cliccaci sopra</button><br> <p>Nel codice HTML sopra:</p> <ul> <li>Allo stesso modo, includi un “<strong><p></strong>"Sottotitoli.</li> <li>Nel passaggio successivo, crea un tag pulsante con un associato "<strong>al clic</strong>"Reindirizzamento dell'evento alla funzione denominata"<strong>divertimento()</strong>"Verrà attivato sul clic del pulsante.</li> <li>Dopodiché, il "<strong><p></strong>"Indica il paragrafo nullo assegnato un ID"<strong>test</strong>"Per visualizzare la data corrente del sistema.</li> </ul> <p>Codice JavaScript</p> <p>Ora, passiamo al codice JavaScript:</p> <script><br>function fun() <br>document.getElementById('test').innerHTML= Date();<br><br></script> <p>Nelle righe di codice sopra:</p> <ul> <li>Una funzione chiamata "<strong>divertimento()</strong>" è definito.</li> <li>Nella definizione della funzione, il "<strong>documento.getElementById ()</strong>"Il metodo prende il paragrafo tramite il suo"<strong>id</strong>"E visualizza la data utilizzando il integrato"<strong>Data()</strong>Funzione "e"<strong>Innerhtml</strong>" proprietà.</li> </ul> <p>Produzione</p> <p>L'output sopra mostra la data corrente del sistema al clic del pulsante.</p> <p>Conclusione</p> <p>JavaScript offre l'integrazione "<strong>al clic</strong>"Evento che innesca un'azione sul clic HTML Element. Invoca la funzione JavaScript per eseguire l'azione specificata sul trigger dell'evento. Potrebbe essere implementato con il pulsante o un altro elemento HTML come "<strong><p>","</strong>" eccetera. Questo post ha spiegato l'uso e la funzionalità del "<strong>al clic</strong>"Evento in 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://it.cyberaxe.org/article/how-to-use-chrono-in-c">« Come usare Chrono in C++?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://it.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Come convertire la stringa in tipo intero in 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://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/what-is-b-string-in-python">Cosa è B String in Python?</a> </div> <div class="white-news__text"> In Python, la notazione b accanto alla stringa normale e il metodo code () viene utilizzata per conv... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/domiziano-conte">Domiziano Conte</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-php-getdate-function">Come utilizzare la funzione GetDate PHP</a> </div> <div class="white-news__text"> Il getDate () in PHP restituisce un array che contiene tutti i dettagli dell'ora corrente, inclusa u... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-inheritance-in-c">Come usare l'eredità in C#</a> </div> <div class="white-news__text"> L'eredità consente a una classe di ereditare proprietà e metodi di un'altra classe. Permette la crea... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</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://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/python-count-characters-in-string">Python Count personaggi nella stringa</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-system-io-namespace-in-c">Cos'è il sistema.Io Namespace in C#</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/sig-valdo-marchetti">Sig. Valdo Marchetti</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/linux-commands">Comandi Linux</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-install-and-enable-ssh-multi-factor-authentication-for-linux-systems">Come installare e abilitare l'autenticazione multi-fattore SSH per i sistemi Linux</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/sig-valdo-marchetti">Sig. Valdo Marchetti</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-regular-expressions-in-php">Come usare espressioni regolari in PHP</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dante-palumbo">Dante Palumbo</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/java">Giava</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-count-the-number-of-words-in-a-string-using-java">Come contare il numero di parole in una stringa usando Java?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/piererminio-de-luca">Piererminio De luca</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-find-oracle-service-name">Come trovare il nome del servizio Oracle?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/java-database-connectivity-with-oracle">Connettività del database Java con Oracle</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-does-docker-differ-from-docker-desktop">In che modo Docker differisce dal desktop Docker?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-stop-all-docker-services">Come fermare tutti i servizi Docker?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/osea-martini">Osea Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-docker-registry-is-set-as-the-default">Quale registro Docker è impostato come impostazione predefinita?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sito sul sistema operativo Linux. Qui troverai molti articoli interessanti e guide utili</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/python">Pitone</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/windows-os">OS Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://it.cyberaxe.org/all-categories"><b>Tutte le categorie</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>