So Erstellen Sie Eine Schaltfläche Mit Einem Code

Inhaltsverzeichnis:

So Erstellen Sie Eine Schaltfläche Mit Einem Code
So Erstellen Sie Eine Schaltfläche Mit Einem Code
Anonim

Beim Erstellen von Seiten ist es manchmal erforderlich, dass beim Klicken auf die in der Seite platzierte Schaltfläche ein vom Autor programmiertes Ereignis im Browser auftritt. Dazu müssen Sie JavaScript-Code in das generierte Dokument einfügen und an die gewünschte Schaltfläche binden. Abhängig von der Codemenge, die zum Implementieren des beabsichtigten Ereignisses erforderlich ist, können Sie die Schaltfläche auf unterschiedliche Weise mit dem Code verbinden.

So erstellen Sie eine Schaltfläche mit einem Code
So erstellen Sie eine Schaltfläche mit einem Code

Anweisungen

Schritt 1

In den meisten Fällen sind JavaScript-Codeaufrufe an das onclick-Ereignis gebunden, dh an den Klick mit der linken Maustaste. Wenn Sie nicht viel Code benötigen, um die auszuführende Aktion zu beschreiben, kann alles direkt im Button-Tag platziert werden. Um beispielsweise den Browser so zu programmieren, dass er beim Klicken auf eine Schaltfläche eine einfache Nachricht anzeigt, würde das JavaScript-Skript so aussehen: alert ('Code funktioniert!') Es braucht nur eine Anweisung und einen Text. All dies kann einfach in die onclick-Ereignisbeschreibung des Button-Tags eingefügt werden. In diesem Fall könnte der einfachste HTML-Code der Seite so aussehen:

Taste mit Code

Taste mit Code

Schritt 2

Es ist nicht praktikabel, komplexeren JavaScript-Code direkt im Button-Tag zu platzieren. Es ist einfacher, eine separate Funktion daraus zu machen und ihren Aufruf in das onclick-Ereignis einzufügen. Dies könnte beispielsweise wie eine Funktion aussehen, die ein Fenster mit der Zeit eines Schaltflächenklicks anzeigt: function getTime() {

var now = neues Datum ();

alert ("Der Code hat funktioniert" + now.getHours () + ":" + now.getMinutes ());

} Es sollte in der Kopfzeile der Seite platziert werden (zwischen den und -Tags). Der vollständige Code der Seite mit einem Aufruf dieser an die Schaltfläche gebundenen Funktion kann wie folgt aussehen:

Funktionsaufruftaste

Funktion getTime() {

var now = neues Datum ();

alert ("Der Code hat funktioniert" + now.getHours () + ":" + now.getMinutes ());

}

Funktionsaufruftaste

Schritt 3

Die gleiche Methode sollte verwendet werden, wenn das Klicken auf mehrere verschiedene Schaltflächen ein Ereignis auslösen soll, das mit demselben JavaScript-Code beschrieben werden kann. Zum Beispiel können Sie die vorherige Funktion leicht ändern, um die Identifikation der gedrückten Schaltfläche zum Meldungsfeld hinzuzufügen: function getTime (btnString) {

var now = neues Datum ();

alert (btnString + "eingeklickt" + now.getHours () + ":" + now.getMinutes ());

} Der vollständige Code für eine Seite mit drei solchen Schaltflächen könnte so aussehen:

Drei Tasten mit Funktionsaufruf

Funktion getTime (btnString) {

var now = neues Datum ();

alert (btnString + "eingeklickt" + now.getHours () + ":" + now.getMinutes ());

}

Erste Taste

Zweite Taste

Dritter Knopf

Empfohlen: