JavaScript onClick

Einführung

JavaScript ist eine bekannte Programmiersprache. Es wird auf mehr als 95% der Websites verwendet, mit denen wir täglich interagieren. Sie können oft sehen, dass beim Klicken auf eine Schaltfläche eine ganze Seite geändert wird, ein Formularfeld geöffnet wird oder ein Popup-Fenster angezeigt wird. Wie können wir aus Sicht eines Programmierers/Entwicklers solche Funktionen implementieren und die Interaktionen der Website mit den Benutzern handhaben?? Wenn es um Interaktionen geht, bietet JavaScript integrierte Funktionen zur Steuerung von Ereignissen auf einer Site.

Es gibt zwei Arten von Ereignissen in JavaScript:

• Ereignis-Listener - hört zu und wartet, bis die Veranstaltung gefeuert wird
• Ereignishandler - ausgeführt, wenn ein Ereignis ausgelöst wird

In diesem Artikel erfahren Sie mehr über den am häufigsten verwendeten Event-Handler von JavaScript, den onClick Veranstaltung. Es gibt noch andere Event-Handler zum Bewegen des Mauszeigers über ein Element oder zum Drücken von Tastaturtasten, aber in diesem Artikel konzentrieren wir uns auf das onClick-Event.

Das onClick-Ereignis wird verwendet, um bestimmte Aufgaben per Klick auf eine Schaltfläche oder durch Interaktion mit einem HTML-Element auszuführen.

Wir zeigen Ihnen nun ein Beispiel, um die Funktionsweise des onClick-Events zu demonstrieren.

Beispiel: Text mit onClick ändern

In diesem Beispiel ändern wir eine Textauswahl beim Klicken auf eine Schaltfläche mithilfe des onClick-Ereignisses. Zuerst erstellen wir ein Absatz-Tag und geben ihm eine ID "Absatz", um später darauf zugreifen zu können. Wir erstellen eine Schaltfläche mit dem onClick-Ereignis und rufen die Funktion namens „ändern“ auf.”

Linuxhinweis

Veränderung!

In der Skriptdatei erstellen wir eine Flag-Variable, mit der wir den Status des Textes in unserem HTML-Absatz-Tag überprüfen können. Dann schreiben wir eine Funktion, die die Funktion „Ändern“ definiert. In der Funktionsdefinition erstellen wir eine „if“-Anweisung, in der wir den Status anhand der Flag-Variablen prüfen. Wir werden auch den Text ändern und die Flagge ändern. Es ist ein ziemlich einfacher Code!

vara = 1;
Funktionsänderung ()
wenn (a==1)
Dokument.getElementById("Absatz").innerHTML = "Linuxhint ist großartig"
a = 0;
sonst
Dokument.getElementById("Absatz").innerHTML = "Linuxhint"
a = 1;

Alles klar! Nachdem wir all diesen Code geschrieben haben, führen wir den Code aus, wechseln zu unserem Browser und klicken auf die neu erstellte Schaltfläche. Nach dem Klicken auf die Schaltfläche sollte der Text von „Linuxhint“ in „Linuxhint is awesome“ geändert werden.”

Wir können die gleiche Technik überall anwenden, um den Inhalt unserer Website nach unseren Bedürfnissen zu ändern. Wir können es verwenden, um ein Bild zu ändern oder jede Art von Aufgabe auszuführen, die wir uns mit diesem Tool vorstellen können.

Fazit

Dieser Artikel erklärt die Verwendung des onClick-Events. In diesem Artikel haben Sie das Konzept der onClick-Funktion praxisnah kennengelernt. Die Nutzung des onClick-Events ist so einfach, dass sogar ein Anfänger mit dieser Funktion beginnen kann. Sie können bei linuxhint weiter lernen, arbeiten und mehr Erfahrung in JavaScript sammeln.com, um diese Programmiersprache besser zu verstehen. Ich danke dir sehr!