Onclick Javascript

| | | |

De onclick JavaScript-gebeurtenis voert een functie uit wanneer een gebruiker op een knop of ander webelement klikt. Deze methode wordt zowel inline in een HTML-document als in een JavaScript-document gebruikt.

Bij het coderen in JavaScript is het gebruikelijk om de code uit te voeren wanneer een gebruiker interactie heeft met de webpagina. U wilt bijvoorbeeld dat er iets gebeurt wanneer een gebruiker op een knop drukt. Maar hoe in JavaScript?

Je implementeert deze functionaliteit

Hier kan de gebeurtenis "onclick ()" van pas komen. De onclick-gebeurtenis is een van de meest gebruikte gebeurtenistypen. onclick laat je code uitvoeren wanneer een gebruiker op een knop of ander element op je webpagina klikt.

In deze korte handleiding leggen we uit hoe de onclick-functie werkt. We zullen zien hoe u onclick in uw code kunt gebruiken om een website interactief te maken.

Update-gebeurtenissen

Onclick is een soort JavaScript-gebeurtenis. Gebeurtenissen zijn acties die plaatsvinden in de browser en kunnen worden geïnitieerd door de gebruiker of door de browser zelf. Een gebruiker die op een knop klikt, een formulier verzendt of een toets op het toetsenbord indrukt, zijn allemaal voorbeelden van gebeurtenissen in actie. In deze zelfstudie concentreren we ons op de eerste: een gebruiker die op een item klikt.

Met behulp van gebeurtenissen kunnen ontwikkelaars een webpagina interactief maken. U kunt een formulier zichtbaar maken wanneer de gebruiker op een knop klikt of een bericht weergeven aan een gebruiker wanneer deze een formulier verzendt.

Er zijn twee hoofdcomponenten van gebeurtenissen: gebeurtenishandlers en gebeurtenislisteners.

Als u op een knop klikt, op een toets drukt of over een item beweegt, wordt een gebeurtenis uitgevoerd. De gebeurtenishandler is de code die wordt uitgevoerd wanneer de gebeurtenis wordt gestart. Wanneer u bijvoorbeeld op een knop klikt, wordt de gebeurtenishandler uitgevoerd.

Het luisteraarsevenement maakt deel uit van een es en md ; item als een knop - het "luistert" en wacht tot je ermee communiceert. Vervolgens voert de luisteraar de gebeurtenishandler uit.

JavaScript onclick

De JavaScript-gebeurtenis voert een functie uit wanneer u op een knop of ander webelement klikt. Een onclick-gebeurtenis kan er bijvoorbeeld voor zorgen dat er een dialoogvenster verschijnt wanneer u een knop stempelt.

Hier is de syntaxis van de onclick-methode in HTML:

Als u op deze HTML-knop klikt, wordt de "codetorun" JavaScript-functie uitgevoerd. We kunnen onclick gebruiken met andere elementen, zoals een div. onclick is niet exclusief voor knoppen.

U kunt onclick ook gebruiken in Simple JavaScript. Hier is een voorbeeld van een onclick JavaScript-methode:

We gebruiken de JavaScript-methode getElementById om een element op te halen van onze webpagina. Wanneer we op het element met de id "knop" klikken, wordt onze onclick-functie uitgevoerd.

JavaScript-voorbeeld van onclick-knop

Stel dat u een tekst op een webpagina wilt wijzigen nadat klikken op een element of een alinea. We kunnen het attribuut onclick gebruiken om deze functionaliteit op een website te implementeren. Laten we beginnen met een HTML-pagina met een knop en wat tekst. We zullen ook een JavaScript-bestand maken dat onze evenementcode zal bevatten.

Dit is een voorbeeld van een eenvoudige webpagina, maar deze is nog niet interactief. Wanneer deze webpagina wordt uitgevoerd, zien we een knop en wat tekst, maar er gebeurt niets als we op onze knop klikken. Dit komt omdat we de onclick-scriptfunctie nog niet hebben geïmplementeerd.

Nu onze webpagina klaar is, kunnen beginnen met het maken van onze onclick-gebeurtenis. Eerst moeten we de gebeurtenislistener onclick () toevoegen aan onze knop. Deze gebeurtenis luistert wanneer de gebruiker op de knop klikt.

Laten we ons bestand "onclick.js" maken, dat de code zal bevatten voor onze gebeurtenis changeParagraph (). Deze gebeurtenis verandert de tekst van onze paragraaf (het "p"-element) naar iets anders.

We hebben een JavaScript-functie gedefinieerd met de naam changeParagraph. We gebruiken de JavaScript-querySelector-methode om een alinea op onze pagina te selecteren. Wanneer we de pagina voor het eerst laden, zien we onze knop en de tekst die zegt: "Deze tekst verandert als je op de knop klikt."

Nadat we op de knop hebben geklikt, verandert onze webpagina en toont onze nieuwe tekst:

 SES9UW5H18rpOrMBgZl2G0rKN LrvhzufnH5bMpX7pd YKpLocGpIBvv9FgaeNxPpoFbLQuJKYqi4cIrWOAGWYrOnN96AJ655kefwbfkk1gCClwg P9I9fQ9G8EQnDUzJw < / figure>

Samenvatting

Over het algemeen geldt dat de code waarmee een evenement op internet kan worden uitgevoerd, door op de pagina te klikken.

Dit is het! Met behulp van de bovenstaande code hebben we met succes een webpagina gemaakt die de code uitvoert wanneer we op een knop drukken. Hoewel onze code hierboven alleen de tekst verandert, kun je het zo ingewikkeld of eenvoudig maken als je wilt.

Als je wilt dat een gebruiker een melding krijgt wanneer hij op de knop klikt, kun je de waarschuwingsfunctie () gebruiken in javascript. Als u "if"-declaraties in uw code wilt toevoegen, kunt u ook

Zie onze JavaScript-leergids .

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method