Hvordan fungerer OnClick -arrangementet i JavaScript

“ved trykk”Hendelse utfører en viss funksjonalitet når brukeren klikker på et HTML -element. Det fungerer på alle typer HTML -elementer bortsett fra , ,, , ,,, , , <br>, , og </strong> elementer.</p> <p>“<strong>ved trykk</strong>”Hendelsen brukes mest til utførelse av JavaScript -funksjonen på knappen eller elementet klikk. Det gjør det mulig for brukerne å ringe en JavaScript -funksjon og utføre den spesifiserte handlingen.</p> <p>Denne guiden vil demonstrere målet og arbeide med “<strong>ved trykk</strong>”Arrangement i JavaScript.</p> <p>Hvordan fungerer OnClick -arrangementet i JavaScript?</p> <p>“<strong>ved trykk</strong>”Hendelse tillater utførelse av JavaScript -funksjonen. Den returnerer utdataene fra JavaScript -funksjonene når brukeren klikker på det spesifiserte elementet.</p> <p>Syntaks</p> <element onclick="function()">Klikk</element> <p>I syntaks ovenfor:</p> <ul> <li><strong>element</strong>: Den spesifiserer det aktuelle HTML -elementet som "<strong>P ”,“ H2 ”,“ H3</strong>" etc.</li> <li><strong>funksjon()</strong>: Det representerer den definerte funksjonen som vil bli påberopt på hendelsesutløseren.</li> </ul> <p>Følgende avsnitt vil demonstrere arbeidet med "<strong>ved trykk</strong>”Arrangement ved hjelp av forskjellige eksempler.</p> <p>Eksempel 1: Bruker "OnClick" -hendelsen for å endre tekstfargen</p> <p>I dette scenariet, et "<strong>ved trykk</strong>”Hendelse kan være assosiert med“<strong> <p>HTML -kode</p> <p>Først må du se på følgende HTML -kode:</p> <h2 align="center"> Endre tekstfarge ved å bruke "OnClick" -hendelsen</p><br><p onclick="sample()"> Klikk på dette avsnittet for å endre fargen.</p> <p>I ovennevnte HTML -kode:</p> <ul> <li>Først må du legge til en underoverføring av nivå 2 via "<strong><p></strong>”Merk og sett innretting til“<strong>senter</strong>”.</li> <li>Deretter inkluderer et avsnitt som har en tilknyttet "<strong>ved trykk</strong>”Hendelse omdirigerer til funksjonen som heter“<strong>prøve()</strong>”Det vil bli utløst på knappeklikk.</li> <li>Nå, legg til “<strong><p></strong>”Tag som spesifiserer et avsnitt med en ID”<strong>test</strong>”Og“<strong>ved trykk</strong>" begivenhet.</li> <li>“<strong>test</strong>”Viser avsnittet med en ny tekstfarge.</li> <li>“<strong>ved trykk</strong>”Hendelse omdirigerer til funksjonen”<strong>prøve()</strong>”Det vil bli utløst på avsnittet klikk.</li> </ul> <p>JavaScript -kode</p> <p>La oss nå gå videre til JavaScript -kodeblokken:</p> <script><br>function sample() <br>document.getElementById("test").style.color = "green";<br><br></script> <p>I kodeblokken ovenfor:</p> <ul> <li>Først av alt, erklærer en funksjon som heter “<strong>prøve()</strong>”.</li> <li>I sin definisjon, bruk "<strong>getElementById ()</strong>”Metode for å få tilgang til avsnittet og endre tekstfargen via“<strong>stil.farge</strong>”Eiendom når du klikker på avsnittet.</li> </ul> <p>Produksjon</p> <p>Utgangen viser den oppdaterte nye fargen på avsnittet.</p> <p>Eksempel 2: Bruker "OnClick" -hendelsen for å endre tekstfontstørrelse og bakgrunnsfarge</p> <p>Dette eksemplet bruker "<strong>ved trykk</strong>”Hendelse for å tilpasse avsnittet slik at teksten”<strong>skriftstørrelse</strong>”Og“<strong>bakgrunnsfarge</strong>”I et avsnitt kan endres etter hendelsesutløseren.</p> <p>HTML -kode</p> <p>Følg først den gitte HTML -koden:</p> <h2 align="center"> Endre tekstbakgrunnsfarge ved å bruke "OnClick" -hendelse</p><br><p onclick="myfunc()"> Trykk på denne overskriften for å endre skriftstørrelse og bakgrunnsfarge</p> <p>I ovennevnte HTML -kode:</p> <ul> <li>“<strong><p></strong>”Oppretter nivå 2 i.e., underhodet justert ved “<strong>senter</strong>”.</li> <li>“<strong><p></strong>”Representerer avsnittet som har et vedlagt“<strong>ved trykk</strong>”Hendelser som får tilgang til JavaScript -funksjonen”<strong>myfunc ()</strong>”.</li> </ul> <p>JavaScript -kode</p> <p>Gå nå videre til følgende JavaScript -kode:</p> <script><br>function myfunc() <br>document.getElementById("first").style.fontSize = "22px";<br>document.getElementById("first").style.backgroundColor = "yellow";<br><br></script> <p>I kodelinjene ovenfor:</p> <ul> <li>Definere funksjonen “<strong>myfunc ()</strong>”.</li> <li>I sin definisjon, "<strong>dokument.getElementById ()</strong>”Metode henter avsnittet via sin ID to ganger og bruker“<strong>skriftstørrelse</strong>”Og“<strong>bakgrunnsfarge</strong>”Egenskaper for å endre avsnittet ved hendelsesutløseren.</li> </ul> <p>Produksjon</p> <p>Som sett, “<strong>skriftstørrelse</strong>" og "<strong>bakgrunnsfarge</strong>”Av avsnittet er endret.</p> <p>Eksempel 3: Bruker "OnClick" -hendelsen for å kopiere inngangsfeltverdien</p> <p>Her, "<strong>ved trykk</strong>”Hendelse kan brukes til å kopiere inndatafeltdataene.</p> <p>HTML -kode</p> <p>Først må du sjekke den oppgitte HTML -koden:</p> <h3 align="center"> Kopier inndatafeltet ved hjelp av "OnClick" -hendelsen</p><br>Passord: <br><br>Gå inn på nytt: <br><br><br><button onclick="result()">Kopier passord</button> <p>I ovennevnte HTML -kode:</p> <ul> <li>På samme måte spesifiser den angitte overskriften tilpasset sentrum.</li> <li>“”Element som heter“<strong>Passord</strong>”Av type”<strong>passord</strong>”Angir et passord med verdien”<strong>Linuxhint12345</strong>”Med en tildelt ID”<strong>PASS1</strong>”. Den vil vise den nevnte passordverdien i inngangsfeltet.</li> <li>Den andre "<strong>Igjen</strong>”Inngangsfelt har også en type”<strong>Passord</strong>”Med en ID”<strong>PASS2</strong>”Å ha en null" verdi ”attributt.</li> <li>Også lage en "<strong>knapp</strong>”Kalt”<strong>Kopier passord</strong>”Å ha et vedlagt”<strong>ved trykk</strong>”Hendelser som får tilgang til JavaScript -funksjonen”<strong>resultat()</strong>”.</li> </ul> <p>JavaScript -kode</p> <p>Nå, oversikt følgende JavaScript -kode:</p> <script><br>function result() <br>document.getElementById("pass2").value = document.getElementById("pass1").value;<br><br></script> <p>I kodelinjene ovenfor:</p> <ul> <li>Erklære funksjonen “<strong>resultat()</strong>”.</li> <li>I sin definisjon, bruk "<strong>dokument.getElementById ()</strong>”Metode to ganger for å kopiere verdien fra førstnevnte“<strong>Passord</strong>”Felt til det siste.</li> </ul> <p>Produksjon</p> <p>Som analysert, den gitte “<strong>Passord</strong>”Verdien er kopiert til“<strong>Igjen</strong>”Tekstfelt på knappeklikk.</p> <p>Eksempel 4: Bruker "OnClick" -begivenheten for å vise gjeldende dato</p> <p>I dette eksemplet kan den diskuterte hendelsen brukes til å vise gjeldende dato for systemet ved å referere til avsnittet.</p> <p>HTML -kode</p> <p>La oss oversikt Følgende HTML -kode:</p> <h3 align="center"> Kopier inndatafeltet ved hjelp av "OnClick" -hendelsen</p><br><button onclick="fun()">Klikk på den</button><br> <p>I ovennevnte HTML -kode:</p> <ul> <li>På samme måte, inkluder en "<strong><p></strong>”Underoverskrift.</li> <li>I neste trinn, lag en knappemerke som har en tilknyttet "<strong>ved trykk</strong>”Hendelse omdirigerer til funksjonen som heter“<strong>moro()</strong>”Det vil bli utløst på knappeklikk.</li> <li>Etter det, “<strong><p></strong>”Betegner null -avsnittet som er tildelt en ID”<strong>test</strong>”For å vise gjeldende dato for systemet.</li> </ul> <p>JavaScript -kode</p> <p>La oss nå gå videre til JavaScript -koden:</p> <script><br>function fun() <br>document.getElementById('test').innerHTML= Date();<br><br></script> <p>I kodelinjene ovenfor:</p> <ul> <li>En funksjon som heter “<strong>moro()</strong>" er definert.</li> <li>I funksjonsdefinisjonen, "<strong>dokument.getElementById ()</strong>”Metode henter avsnittet via sin“<strong>id</strong>”Og viser datoen ved hjelp av den innebygde“<strong>Dato()</strong>”Funksjon og“<strong>indrehtml</strong>”Eiendom.</li> </ul> <p>Produksjon</p> <p>Outputten ovenfor viser gjeldende dato for systemet på knappeklikk.</p> <p>Konklusjon</p> <p>JavaScript tilbyr det innebygde “<strong>ved trykk</strong>”Hendelse som utløser en handling på HTML -elementet klikk. Den påkaller JavaScript -funksjonen for å utføre den spesifiserte handlingen etter hendelsesutløseren. Det kan implementeres med knappen eller et annet HTML -element som "<strong><p>”,“</strong>" etc. Dette innlegget forklarte bruken og funksjonaliteten til “<strong>ved trykk</strong>”Arrangement i 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://no.cyberaxe.org/article/how-to-use-chrono-in-c">« Hvordan bruke Chrono i C++?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://no.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Hvordan konvertere streng til heltallstype i 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://no.cyberaxe.org/category/c-programming">C programmering</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-difference-between--and--operators-in-c-programming">Hva er forskjellen mellom = og == operatører i C -programmering?</a> </div> <div class="white-news__text"> = Operatøren brukes til å tilordne en verdi til en variabel, mens == operatøren sammenligner to vari... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/elias-aalerud-aasen">Elias Aalerud Aasen</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/what-is--in-c">Hva er += i C++?</a> </div> <div class="white-news__text"> I C ++ er+= en kombinasjon av to operatører, den ene er tilleggsoperatøren og den andre er oppdragso... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/java">Java</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/java-dom-parser-examples-to-parse-xml">Java Dom Parser Eksempler på analyser XML</a> </div> <div class="white-news__text"> Praktisk opplæring om bruken av Java DOM -parseren for å lese innholdet i en enkel XML -fil på forsk... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</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://no.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-fetch-php-timezone-list">Hvordan hente PHP Timezone List</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-aalerud-aasen">Elias Aalerud Aasen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-connect-to-oracle-database-top-10c-using-sql-developer">Hvordan koble til Oracle Database Top 10c ved hjelp av SQL Developer?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/alexander-sorlie">Alexander Sørlie</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-are-the-differences-between-oracle-linux-and-ubuntu-linux">Hva er forskjellene mellom Oracle Linux og Ubuntu Linux?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-add-and-play-videos-on-a-webpage-using-html">Hvordan legge til og spille av videoer på en webside ved hjelp av HTML?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/powershell">Kraftskall</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-the-get-service-command-in-powershell">Hvordan bruke kommandoen “Get-Service” i PowerShell</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/mathias-halvorsen">Mathias Halvorsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-does-docker-differ-from-docker-desktop">Hvordan skiller Docker seg fra Docker Desktop?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-download--install-sqlite-tools">Hvordan laste ned og installere SQLite Tools?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/jorgen-christiansen">Jørgen Christiansen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-difference-between---and--operators-in-php">Hva er forskjellen mellom .= og += operatører i PHP</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-krogh-svendsen">Elias Krogh Svendsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/c-sharp">C skarp</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-are-escape-sequences-in-c">Hva er rømningssekvenser i C#</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/c-sharp">C skarp</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-difference-between-class-and-object-in-c">Hva er forskjellen mellom klasse og objekt i C#</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-krogh-svendsen">Elias Krogh Svendsen</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Et nettsted om Linux-operativsystemet. Her finner du mange interessante artikler og nyttige guider</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://no.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/postgresql">PostgreSql</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://no.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/c-sharp">C skarp</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://no.cyberaxe.org/all-categories"><b>Alle Kategorier</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>