Syntax des Onclick -Ereignisses
In HTML
Hier können Elemente ein Knopf oder etwas anderes sein. Im Onclick -Event schreiben wir ein Skript oder eine Funktion. Das Onclick -Event unterstützt fast alle Elemente von HTML außer , , ,
In js
Objekt.onclick = function () script;In JavaScript werden wir dem Onclick -Ereignis eine Funktion zuweisen. In der Klammung schreiben wir das Skript, um eine Aufgabe oder Funktion auszuführen.
Beispiel 1: Onclick -Ereignis, um die Textfarbe zu ändern
Wenn wir auf einer Website auf eine Schaltfläche klicken, löst das Onclick -Ereignis ein bestimmtes Verhalten aus. Dies kann auftreten, wenn wir Online -Formulare oder Daten einreichen, wenn wir bestimmte Webseiteninhalte und ähnliche Ereignisse ändern. Um das Onclick-Event in einer realen Umgebung zu üben, schreiben wir zunächst ein einfaches HTML mit etwas Styling.
Wir haben eine einfache HTML -Seite erstellt, auf der es einen Text mit einer Schaltfläche gibt. Um die Seite zu stylieren, haben wir einige CSS verwendet.
Wenn wir auf die Schaltfläche klicken, beabsichtigen wir, den Text blau zu machen.
Nachdem wir die JavaScript -Methode geschrieben haben, um die Farbe zu ändern, müssen wir unserer Schaltfläche eine Onclick -Eigenschaft hinzufügen. Daher müssen wir unsere HTML leicht verändern:
Wir haben ein Onclick -Ereignis im Button -Tag hinzugefügt. Wir haben eine Funktion namens ChangeColor () zur Ausführung zugewiesen. Für das Ergebnis müssen wir eine JS -Datei erstellen, um sie in eine JavaScript -Datei oder ein Tag in einer HTML -Datei zu schreiben. Wir werden unser Skript jedoch in die HTML -Datei schreiben.
Zunächst müssen wir das Element auswählen, das wir ändern möchten, nämlich der Text „Ändern Sie die Farbe“, die in der enthalten ist
Schild. Die DOM -Methoden GetElementsByClassName (), GetelementById () oder QuerySelector () in JavaScript können verwendet werden, um dies zu erreichen. Der Wert wird dann der Variablen zugewiesen. Wir werden QuerySelector () in diesem Beispiel verwenden, da es aktueller und schneller ist. Zusätzlich werden die Variablen mit Verwendung deklariert Const. Es ist sicherer, weil es hilft, Variablen schreibgeschützt zu machen.
Jetzt werden wir im Skript -Tag unsere Funktion schreiben.
Wie oben in HTML zu sehen, ist die Funktion, die wir verwenden werden, echnalColor (). Dies ist der Grund, warum ChangeColor als unsere Funktionskennung (Name) festgelegt wird. Es wird nicht funktionieren, wenn der Name dem entspricht, was sich in der HTML befindet. In DOM, um alles, was mit dem Stil zu tun hat, müssen Sie „Stil“ schreiben, gefolgt von einem Punkt (.). Die Änderung, die Sie vornehmen möchten, wird dann vorgenommen, die Farbe, Hintergrundfarbe, Textgröße usw. sein können. Um auf unseren Text „Ändern Sie die Farbe ändern“ zuzugreifen, verwenden wir den deklarierten variablen Namen in unserer Funktion. Dann setzen wir die Farbe des Textes auf blau. Wenn wir die Taste drücken, ändert sich die Farbe des Textes in Blau:
Indem wir unseren Text mehr Farben hinzufügen, können wir die Dinge noch einen Schritt weiter gehen:
Also, was wir gerne tun möchten, ist, das Schreiben orange-rot, grün und blau zu machen. Diesmal akzeptieren die HTML -Funktionen von Onclick die Werte für die Farbe, die wir auf den Text anwenden möchten. In JavaScript werden diese als Parameter bezeichnet. Wir werden auch eine Funktion erstellen, die ihre Parameter auch akzeptiert. Wir nennen sie "Farbe". Unsere Website hat geringfügige Änderungen erfahren:
Wählen wir also unseren Text "Ändern Sie den Farb ändern" und geben Sie den Code ein, um ihn orange-rot, blau und grün zu machen:
Der Code der Funktion legt zuerst die Farbe auf das, was an die Anrufe von echnecolor () in den HTML -Schaltflächen geliefert wurde.”
Wenn wir eine dieser Tasten (blau, grün und orange) drücken, ändert sich die Farbe des Textes entsprechend.
Beispiel 2: Erstellen Sie Warnungen mit dem Onclick -Ereignis
Erstellen wir in diesem Beispiel eine Beispiel -Webseite mit einer Schaltfläche mit HTML. Wenn die Taste gedrückt wird, erhalten wir oben auf dem Bildschirm eine Warnmeldung. Um eine Webseite zu erstellen, verwenden wir den folgenden Code:
Eine Webseite, die aus einer Schaltfläche besteht, wird mit diesem Code erstellt:
Jetzt müssen wir eine JavaScript -Funktion schreiben, die ausgeführt wird, um Warnungen zu generieren. Erstellen wir eine Funktion showArt () in den Skript -Tags in demselben HTML -Code wie folgt:
Nach dem Schreiben der JavaScript -Methode, um die Farbe zu ändern, müssen wir unserer Schaltfläche eine Onclick -Eigenschaft hinzufügen. Daher müssen wir unsere HTML leicht verändern:
Das Aktualisieren dieses Codes fügt der Schaltfläche Funktionen hinzu. Wenn ein Benutzer die Schaltfläche trifft, wird die Onclick -Eigenschaft auf der Taste bewirkt, dass die Funktion "showArt () ausgelöst wird. Tastaturbenutzer können auch das Onclick -Ereignis verwenden. Die Mitteilung wird auch gesendet, wenn ein Benutzer die Registerkarte verwendet, um zur Taste zu wechseln, und dann die Eingabetaste drückt.
Wie Sie oben sehen können, haben wir nach dem Drücken der Taste "Alarmanhänger" eine Warnmeldung erhalten.
Für das Button -Element kann ein neuer Stil hinzugefügt werden. Um das Erscheinungsbild der Schaltfläche zu ändern, wenn Benutzer darüber oder Tastaturregisterkarte über die Tastaturmaus maust.
Der obige Code styliert eine Schaltfläche. Es ist nur für die Erfahrung des Benutzers. Das Stylieren der Schaltfläche wirkt sich nicht auf die Funktionalität der Schaltfläche aus.
Versuchen Sie, nach dem Styling auf die Schaltfläche zu klicken. Wenn alles nach dem Plan verläuft, sollte das Überschweben der Schaltfläche zu einer Änderung des Stils führen. Wie zuvor sollte das Drücken der Taste dazu führen, dass die Warnung mit Ihrem benutzerdefinierten Text angezeigt wird. Testen Sie es jetzt ohne Maus, um sicherzustellen, dass es auch für Tastaturbenutzer funktioniert.
Beispiel 3: Onclick -Event zum Kopieren des Textes
Wir können auch Text von einem Feld in ein anderes kopieren, indem wir das Onclick -Ereignis und eine JavaScript -Funktion verwenden. Erstellen wir eine HTML -Seite mit zwei Eingabetextfeldern, damit wir Daten zum Kopieren schreiben können.
Wir müssen die Funktion in den Skript -Tags schreiben, damit wir sie mit dem Onclick -Ereignis wie folgt aufrufen können:
Nachdem Sie den Code aktualisiert haben, wird beim Drücken der Taste das Onclick -Ereignis den Funktion CopyTxt aufgerufen und der Text des Textes von Text1 wird in das Feld Text2 kopiert.
Abschluss
In diesem Tutorial haben wir gesehen, dass beim Klicken auf ein Element das Onclick -Ereignis einem Programmierer ermöglicht, eine JavaScript -Funktion auszuführen. Wir können es für viele verschiedene Funktionen verwenden, wie z. B. Warnmeldungen und Formularvalidierung usw. Wir haben in diesem Beitrag drei Beispiele implementiert, um Ihnen zu zeigen.