JavaScript onClick

Invoering

JavaScript is een bekende programmeertaal. Het wordt gebruikt in meer dan 95% van de websites waarmee we dagelijks communiceren. U ziet vaak dat met een klik op de knop een hele pagina wordt gewijzigd, een formulierveld wordt geopend of een pop-upvenster verschijnt. Hoe kunnen we, vanuit het perspectief van een programmeur/ontwikkelaar, dergelijke functionaliteit implementeren en omgaan met de interacties van de website met gebruikers? Als het op interactie aankomt, biedt JavaScript ingebouwde functies om gebeurtenissen op een site te beheren.

Er zijn twee soorten gebeurtenissen in JavaScript:

• Evenement Luisteraar - luistert en wacht tot het evenement wordt ontslagen
• Event-handler - uitgevoerd wanneer een evenement wordt geactiveerd

In dit artikel leer je over de meest gebruikte gebeurtenis-handler van JavaScript, de bij klikken evenement. Er zijn andere event-handlers om over een element te zweven of voor het indrukken van toetsen op het toetsenbord, maar in dit artikel zullen we ons concentreren op de onClick-gebeurtenis.

De onClick-gebeurtenis wordt gebruikt om bepaalde taken uit te voeren met een klik op een knop of door interactie met een HTML-element.

We laten u nu een voorbeeld zien om te laten zien hoe het onClick-evenement werkt.

Voorbeeld: Tekst wijzigen met onClick

In dit voorbeeld zullen we een selectie van tekst wijzigen met een klik op een knop met behulp van de onClick-gebeurtenis. Eerst zullen we een alinea-tag maken en deze een ID "paragraaf" geven om er later toegang toe te krijgen. We zullen een knop maken met de onClick-gebeurtenis en de functie met de naam "wijzigen" aanroepen.”

Linuxhint

Verandering!

In het scriptbestand zullen we een vlagvariabele maken waarmee we de status van de tekst in onze HTML-paragraaftag kunnen controleren. Vervolgens zullen we een functie schrijven die de functie "wijzigen" definieert. In de functiedefinitie zullen we een "if" -statement maken, waarin we de status zullen controleren met behulp van de vlagvariabele. We zullen ook de tekst en de vlag veranderen. Het is een vrij eenvoudig stukje code!

var a = 1;
functie verandering()
als (a==1)
document.getElementById("alinea").innerHTML = "Linuxhint is geweldig"
een = 0;
anders
document.getElementById("alinea").innerHTML = "Linuxhint"
een = 1;

Okee! Nadat we al deze code hebben geschreven, zullen we de code uitvoeren, naar onze browser gaan en op de nieuw gemaakte knop klikken. Nadat u op de knop hebt geklikt, moet de tekst worden gewijzigd van "Linuxhint" in "Linuxhint is geweldig.”

We kunnen overal dezelfde techniek toepassen om de inhoud van onze website aan te passen aan onze behoeften. We kunnen het gebruiken bij het wijzigen van een afbeelding of het uitvoeren van elk type taak dat we ons kunnen voorstellen met deze tool.

Conclusie

In dit artikel wordt uitgelegd hoe u het onClick-evenement gebruikt. In dit artikel heb je het concept van de onClick-functie op een praktische manier geleerd. Het gebruik van het onClick-evenement is zo eenvoudig dat zelfs een beginner met deze functie kan beginnen te werken. Je kunt blijven leren, werken en meer ervaring opdoen in JavaScript op linuxhint.com om deze programmeertaal beter te begrijpen. Heel erg bedankt!