Jak utworzyć poprzedni i następny przycisk i nie pracują na pozycji końcowej za pomocą JavaScript

Renata Borowiec
Jak utworzyć poprzedni i następny przycisk i nie pracują na pozycji końcowej za pomocą JavaScript
Tworzenie poprzedniego przycisku i następnego przycisku z nie-pracującym na obu pozycjach jest naprawdę łatwe do wdrożenia na elementach HTML za pomocą JavaScript. Ten artykuł przejdzie proces krok po kroku. Aby zaimplementować nie-pracowanie przycisków, będziemy grać z „wyłączony„Własność elementów HTML. Zacznijmy.

Krok 1: Skonfiguruj dokument HTML

W dokumencie HTML utwórz znacznik środkowy, aw tym znaczniku utwórz

1




Jest tu kilka rzeczy do zanotowania:

  • znacznik zawiera wartość 1, ponieważ zakres wartości w tym przykładzie będzie wynosić od 1 do 7.

  • Po naciśnięciu następnego przycisku, Następny() Funkcja jest wywoływana ze skryptu
  • Po naciśnięciu przycisku wstecznego, z powrotem() Funkcja jest wywoływana ze skryptu
  • W celu odniesienia wszystkie trzy elementy mają przypisane osobne identyfikatory

Następnie strona internetowa ładuje się z domyślnym ustawionym wartością do „1”Dlatego przycisk Wstecz powinien być wyłączony od początku strony internetowej. W tym celu po prostu dołącz „Onload”Własność na tag i ustaw go równy gotowy() funkcja z pliku skryptu jako:



Podstawowy szablon HTML jest skonfigurowany, wykonywanie tego pliku HTML zapewni następujący wynik w przeglądarce:

Przeglądarka pokazuje dwa przyciski i

Tag wyświetla bieżącą wartość.

Krok 2: Wyłączanie przycisku wstecznego na pełnym obciążeniu strony internetowej

Jak wspomniano wcześniej, przycisk Wstecz powinien być wyłączony, gdy strona internetowa jest załadowana, ponieważ wartość wynosi 1, co jest pozycją końcową. Dlatego wewnątrz pliku skryptu odwołaj się do 3 elementów strony internetowej HTML za pomocą ich identyfikatorów i przechowuj odniesienie w osobnych zmiennych.

backButton = Dokument.getElementById („Back”);
NextButton = Dokument.getElementById („następny”);
liczba = dokument.getElementById („liczba”);

Utwórz także nową zmienną i ustaw jej wartość równą 1. Ta zmienna będzie pokazywała wartość var i = 1;

Następnie utwórz funkcję gotowa (), która zostanie wywołana do pełnego ładowania strony internetowej, aw tej funkcji prosta wyłącz przycisk Wstecz za pomocą następujących wierszy:

funkcja gotowa ()
Przycisk powrotu.niepełnosprawne = true;

W tym momencie HTML wygląda jak następujące po załadowaniu:

Krok 3: Dodanie funkcji do następnego przycisku

Aby dodać funkcję do strony internetowej HTML, utwórz funkcję Next (), która zostanie wywołana po kliknięciu następnego przycisku i pełnej funkcji pracy z następującymi wierszami:

funkcja następna ()
i ++;
if (i == 7)
Następny przycisk.niepełnosprawne = true;

Przycisk powrotu.niepełnosprawny = false;
numer.innerhtml = i;

W tym fragmencie kodu dzieje się następujące rzeczy:

  • Po pierwsze, zwiększ wartość „I”Zmienna o 1, ponieważ jeśli następny przycisk nie jest wyłączony, oznacza to, że pozycja końcowa nie została jeszcze osiągnięta
  • Następnie sprawdź, czy zwiększenie wartości „I„Zmienna spowodowała, że ​​osiągnęła wartość pozycji końcowej (która w tym przypadku jest ustawiona na 7), jeśli tak, to wyłącz„Następny przycisk”, Ustawiając właściwość wyłączonej na true
  • Jeśli następny przycisk został kliknięty, oznacza to, że wartość nie jest już na jednym, co oznacza, że ​​przycisk Wstecz musi być włączony, dlatego ustaw swoją właściwość wyłączoną na false
  • Na końcu zmień wartość w naszym

    tag, ustawiając wartość innerHTML na „I"

W tym momencie strona internetowa HTML poda następujące dane wyjściowe:

Z wyjścia jasno wynika, że ​​gdy wartość zmienia się z 1 (pozycja dolna), przycisk Wstecz jest włączony. A także, gdy wartość osiągnie 7 (maksymalna pozycja końcowa), następny przycisk jest włączony.

Krok 4: Dodanie funkcji do przycisku wstecznego

Utwórz funkcję back (), która zostanie wywołana po kliknięciu przycisku Wstecz i zaimplementuj pełną funkcję pracy z następującymi wierszami:

funkcja back ()
I--;
if (i == 1)
Przycisk powrotu.niepełnosprawne = true;

Następny przycisk.niepełnosprawny = false;
numer.innerhtml = i;

W tym fragmencie kodu dzieją się następujące rzeczy:

  • Po pierwsze, zmniejsz wartość „I”Zmienna o 1, ponieważ jeśli przycisk wstecz nie jest wyłączony, oznacza to, że pozycja dolnej części nie została jeszcze osiągnięta
  • Następnie sprawdź, czy zwiększenie wartości zmiennej „i” spowodowało, że osiągnęła wartość pozycji dolnej części końcowej (która w tym przypadku jest ustawiona na 1), jeśli tak, to wyłącz „Przycisk powrotu”, Ustawiając właściwość wyłączonej na true
  • Jeśli przycisk wstecz został kliknięty, oznacza to, że wartość nie jest już w 7, co oznacza, że ​​następny przycisk musi być włączony, zatem ustaw swoją właściwość wyłączoną na false
  • Na końcu zmień wartość w naszym

    tag poprzez ustawianie wartości wewnętrznej na „i”

W tym momencie HTML ma pełną funkcjonalność, jak pokazano poniżej:

Ze wyjścia jasno wynika, że ​​oba przyciski działają idealnie, a nie pracują również na pozycji końcowej.

Wniosek

W tym artykule wyjaśniono, jak utworzyć dwa przyciski na stronie internetowej HTML i wdrożyć ich pracę. A także zaimplementuj nie pracującą logikę, aby wyłączyć przycisk po osiągnięciu pozycji końcowej. Aby zaimplementować przyciski nie-pracujące, po prostu ustaw wyłączoną właściwość elementu HTML za pomocą JavaScript

C ++
Jak zadeklarować zmienne w C++?
Aby zadeklarować zmienną w C ++, musisz określić jej typ i nazwę danych. Ponadto przeczytaj ten prze...
Maja Kucharski
C ++
Jak używać operatora przypisania odejmowania w C ++
W C ++ -= jest operatorem przypisywania odejmowania, odejmuje dwie przeciwne wartości boczne od oper...
Renata Borowiec
php
Dlaczego PHP powinien być używany w tworzeniu stron internetowych
PHP jest doskonałym wyborem do tworzenia stron internetowych ze względu na jego prostotę, elastyczno...
Justyna Flak