So erstellen Sie mit JavaScript die vorherige und nächste Schaltfläche und nicht nach Arbeit in der Endposition in der Endposition

Arved Riermeier
So erstellen Sie mit JavaScript die vorherige und nächste Schaltfläche und nicht nach Arbeit in der Endposition in der Endposition
Das Erstellen einer vorherigen Taste und eine nächste Taste mit dem Nichtbearbeiten an beiden Positionen ist mit Hilfe von JavaScript wirklich einfach auf HTML-Elementen zu implementieren. Dieser Artikel wird Schritt für Schritt den Prozess durchlaufen. Um die Nichtbearbeiten der Tasten zu implementieren, werden wir mit dem spielenBehinderteEigentum der HTML -Elemente. Lass uns anfangen.

Schritt 1: Richten Sie das HTML-Dokument ein

Erstellen Sie im HTML -Dokument ein Center -Tag und erstellen Sie in diesem Tag a

1




Es gibt hier ein paar Dinge zu beachten:

  • Tag enthält den Wert 1, da der Wertebereich für dieses Beispiel von 1 bis 7 liegen wird und diese auch die Endposition sein werden.

  • Beim Drücken der nächsten Taste die nächste() Die Funktion wird aus dem Skript aufgerufen
  • Beim Drücken der Rücktaste die zurück() Die Funktion wird aus dem Skript aufgerufen
  • Für die Verweise sind allen drei Elementen separate IDs zugewiesen

Danach lädt die Webseite mit dem Standardwert auf “1Daher sollte die Back -Taste vom Beginn der Webseite deaktiviert werden. Dafür schließen Sie einfach eine ein “OnloadEigentum auf der Tag und festlegen bereit() Funktion aus der Skriptdatei als:



Die grundlegende HTML -Vorlage ist eingerichtet, wobei die Ausführung dieser HTML -Datei das folgende Ergebnis im Browser bereitstellt:

Der Browser taucht die beiden Tasten und die auf

Tag zeigt den aktuellen Wert an.

Schritt 2: Deaktivieren Sie die Schaltfläche zurück auf der vollständigen Load von Webpage

Wie bereits erwähnt, sollte die Back-Taste deaktiviert werden, wenn die Webseite geladen wird, da der Wert bei 1 liegt. Dies ist eine Endposition. Verweisen Sie daher in der Skriptdatei auf die 3 Elemente der HTML -Webseite mit ihren IDs und speichern Sie ihre Referenz in separaten Variablen.

Backbutton = Dokument.GetElementById ("zurück");
NextButton = Dokument.GetElementById ("Next");
Nummer = Dokument.GetElementById ("Nummer");

Erstellen Sie außerdem eine neue Variable und setzen Sie ihren Wert auf 1. Diese Variable wird den Wert der zeigen var i = 1;

Erstellen Sie danach die Funktion Ready (), die auf das vollständige Laden der Webseite aufgerufen wird, und deaktivieren Sie in dieser Funktion einfach die Back -Taste mit den folgenden Zeilen:

Funktion Ready ()
Zurück-Button.deaktiviert = true;

Zu diesem Zeitpunkt sieht die HTML bei geladenen Aussagen aus:

Schritt 3: Hinzufügen von Funktionen zur nächsten Schaltfläche Hinzufügen

Um der HTML -Webseite eine Funktion hinzuzufügen, erstellen Sie die nächste () -Funktion, die auf die Klicken auf die nächste Schaltfläche und die vollständige Arbeitsfunktion mit den folgenden Zeilen aufgerufen wird:

Funktion next ()
i ++;
if (i == 7)
nächster Knopf.deaktiviert = true;

Zurück-Button.deaktiviert = falsch;
Nummer.Innerhtml = i;

In diesem Code -Snippet passieren die folgenden Dinge:

  • Erstens erhöhen Sie den Wert des "ich”Variable um 1, denn wenn die nächste Taste nicht deaktiviert ist, bedeutet dies, dass die Endposition noch nicht erreicht wurde
  • Überprüfen Sie dann, ob Sie den Wert des “erhöhen“ich"Variable hat dazu geführt, dass es den Endpositionswert erreicht hat (was in diesem Fall auf 7 festgelegt ist), falls ja, dann deaktivieren Sie das"nächster Knopf”Durch Festlegen der deaktivierten Eigenschaft auf true
  • Wenn auf die nächste Schaltfläche angeklickt wurde, bedeutet dies, dass der Wert nicht mehr bei einem ist, was bedeutet, dass die Back -Schaltfläche aktiviert sein muss, und setzen
  • Ändern Sie am Ende den Wert in unserem

    Tag, indem Sie seinen inneren Wert auf “festlegen“ich”

Zu diesem Zeitpunkt gibt die HTML -Webseite die folgende Ausgabe an:

Aus der Ausgabe ist klar. Und wenn der Wert 7 (maximale Endposition) erreicht, ist die nächste Taste aktiviert.

Schritt 4: Hinzufügen von Funktionen zur Rückbutton hinzufügen

Erstellen Sie die Funktion von Back (), die beim Klicken auf die Back -Schaltfläche aufgerufen werden soll, und implementieren Sie die vollständige Arbeitsfunktion mit den folgenden Zeilen:

Funktion zurück ()
ich--;
if (i == 1)
Zurück-Button.deaktiviert = true;

nächster Knopf.deaktiviert = falsch;
Nummer.Innerhtml = i;

In diesem Code -Snippet passieren die folgenden Dinge:

  • Erstens verringern Sie den Wert der “ich”Variable um 1, denn wenn die Rückbutton nicht deaktiviert ist, bedeutet dies, dass die untere Endposition noch nicht erreicht wurde
  • Überprüfen Sie dann, ob das Erhöhen des Wertes der "I" -Variable dazu geführt hat, dass er den Wert des unteren Endpositionswerts erreicht hat (was in diesem Fall auf 1 festgelegt ist), falls ja, dann deaktivieren Sie die “Zurück-Button”Durch Festlegen der deaktivierten Eigenschaft auf true
  • Wenn die Schaltfläche zurück angeklickt wurde, bedeutet dies, dass der Wert nicht mehr angeht 7, Dies bedeutet, dass die nächste Schaltfläche aktiviert sein muss, und setzen Sie daher seine deaktivierte Eigenschaft auf false fest
  • Ändern Sie am Ende den Wert in unserem

    Tag, indem Sie seinen inneren Wert auf "I" festlegen

Zu diesem Zeitpunkt verfügt die HTML -Funktionalität wie unten angezeigt:

Aus der Ausgabe geht hervor, dass beide Schaltflächen perfekt funktionieren und auch die nicht arbeitende Position in der Endposition funktioniert.

Abschluss

In diesem Artikel wurde erläutert, wie zwei Schaltflächen auf einer HTML -Webseite erstellt und ihre Arbeit implementiert werden können. Implementieren Sie auch eine nicht arbeitende Logik, um die Taste zu deaktivieren, wenn die Endposition erreicht ist. Um die nicht arbeitenden Schaltflächen zu implementieren, legen Sie einfach die deaktivierte Eigenschaft des HTML

html
Wie kann Flexbox verwendet werden, um eine Navigationsleiste zu erstellen??
Um eine Navigationsleiste mit Flexbox zu erstellen....
Arved Riermeier
Oracle -Datenbank
Java -Datenbankkonnektivität mit Oracle
Um Java mit der Oracle -Datenbank zu verbinden, den JDBC -Treiber herunterzuladen und zu konfigurier...
Stephan Harms
Sqlite
So herunterladen und installieren Sie SQLite -Tools?
SQLite ist ein weit verbreitetes, leichtes und effizientes Datenbankverwaltungssystem, das Sie einfa...
Christopher Lammert