- Wie schalte ich eine Schaltfläche in JavaScript um?
- Beispiel 1: Ändern von Textnachrichten durch Umschalten einer Schaltfläche
- Beispiel 2: Umschalten der ON/OFF-Schaltfläche in JavaScript
Wie schalte ich eine Schaltfläche in JavaScript um?
Eine bedingte Anweisung ist eine Grundvoraussetzung für das Umschalten einer Schaltfläche in JavaScript. Um dies zu erreichen, müssen Sie das Element abrufen und dann wird eine benutzerdefinierte Funktion angewendet, um eine bestimmte Operation auf dieses Element anzuwenden. Die Funktion ist mit dem onclick-Ereignis der Schaltfläche verknüpft. Wenn also auf die Schaltfläche geklickt wird, wird diese Funktion ausgeführt. Lassen Sie uns einige Beispiele üben, um eine Schaltfläche in JavaScript umzuschalten.
Beispiel 1: Ändern von Textnachrichten durch Umschalten einer Schaltfläche
Als Beispiel wird das Ändern einer Nachricht durch Umschalten einer Schaltfläche in JavaScript betrachtet. Das Beispiel besteht aus HTML- und JavaScript-Code, die im Folgenden erläutert werden:
HTML Quelltext
< html >
< h2 > Beispiel zum Umschalten einer Schaltfläche < / h2 >
< div Ich würde = 'js' > Drücken Sie die Taste, um Magie zu sehen < / div >
< Taste anklicken = 'btntog()' > Taste < / Taste >
< / html >
< Skript Quelle = 'test.js' >< / Skript >
Im HTML-Code lautet die Beschreibung wie folgt:
- EIN -Tag wird mit einem „ id=js “.
- Danach wird eine Schaltfläche erstellt, die a zugeordnet ist „btntog()“ Methode. Durch Drücken 'Taste' , die Methode ' btntog() “ ausgelöst wird.
- Am Ende die JavaScript-Datei „test.js“ wird übergeben als Quelle innerhalb
Stichworte. Der Code für die JavaScript-Datei „ test.js “ gibt es hier:
JavaScript-Code
Funktionbtntog ( )
{
wo = dokumentieren. getElementById ( 'js' ) ;
wenn ( t. innerHTML == 'Willkommen bei Linuxhint' ) {
t. innerHTML = 'JavaScript-Welt' ; }
anders {
t. innerHTML = 'Willkommen bei Linuxhint' ; }
}In diesem Code:
- getElementById wird verwendet, um das HTML-Element „ js “ und der Wert wird in einer Variablen gespeichert „ t “.
- Danach die innerHTML -Eigenschaft wird in der if-Bedingung verwendet, um den Text „ Willkommen bei Linuxhint “.
- Wenn die Bedingung wahr ist, wird der Inhalt „ Willkommen bei Linuxhint “ wird durch ersetzt „JavaScript-Welt “.
- Wenn die Bedingung falsch ist, wird der Text „Willkommen bei Linuxhint“ wird als HTML-Inhalt dem div-Tag zugewiesen.
Ausgabe
Die Ausgabe zeigt, dass das Umschalten einer Schaltfläche zwei Meldungen als zurückgibt „Willkommen bei Linuxhint“ und „JavaScript-Welt“ Alternative.
Beispiel 2: Umschalten der ON/OFF-Schaltfläche in JavaScript
Es folgt ein Beispiel, um den Inline-Text der Schaltfläche zu ändern. In diesem Beispiel ist die „ AN AUS ” Text ändert alternativ den Wert durch Drücken der Taste. Die HTML- und JavaScript-Codes werden hier bereitgestellt:
HTML Quelltext
< html >
< h2 > Beispiel zum Umschalten einer Schaltfläche h2 >
< Eingabetyp = 'Taste' Ich würde = 'meinBtn' Wert = 'AUS'
anklicken = 'Datum();' >
< script src = 'test.js' > Skript >
html >Der obige Code wird wie folgt beschrieben:
- Eine anklickbare Schaltfläche mit einer ID von „meinBtn“ erstellt und sein Wert auf gesetzt 'AUS' .
- Durch Drücken der Taste wird die Datum() Methode wird ausgelöst.
- Schlussendlich, „test.js“ wird an den Quellpfad darin angehängt
Schild.
JavaScript-Code
funktionstgl ( )
{
wo = dokumentieren. getElementById ( 'meinBtn' ) ;
wenn ( t. Wert == 'AN' ) {
t. Wert = 'AUS' ; }
sonst ( t. Wert == 'AUS' ) {
t. Wert = 'AN' ; }
}In diesem Code:
- EIN Datum() -Methode wird verwendet, um eine Schaltfläche in JavaScript umzuschalten.
- Bei dieser Methode extrahieren Sie das HTML-Element, indem Sie die verwenden getElementById -Eigenschaft, und dann wird ihr die if else-if-Anweisung hinzugefügt.
- Wenn die „Wert==EIN“ , schalten Sie den Wert um 'AUS'. Wenn der Wert ist AUS, dann wird der Wert umgeschaltet auf „ AN' .
Ausgabe
Die Ausgabe zeigt, dass die Schaltfläche umgeschaltet wurde AUS zu AN .
Das ist alles! Sie haben gelernt, eine Schaltfläche in JavaScript umzuschalten.
Fazit
In JavaScript kann eine Schaltfläche verwendet werden, um zwischen verschiedenen Zuständen ihrer eigenen Werte umzuschalten, oder es kann eine beliebige Funktion mit der Umschaltoperation verknüpft werden. Das onclick() Ereignis der Schaltfläche ist mit der Funktion verknüpft. Dieser Artikel erklärt einen Überblick über das Umschalten einer Schaltfläche zusammen mit zwei praktischen Beispielen. Das erste Beispiel extrahiert den Text durch die innerHTML -Eigenschaft und ändert sie über eine Umschaltfläche. Im zweiten Beispiel wird der Wert der Schaltfläche selbst mithilfe einer benutzerdefinierten Funktion geändert.