Hvordan lage tidligere og neste knapp og ikke-arbeid på sluttposisjon ved hjelp av JavaScript

Martin Berge
Hvordan lage tidligere og neste knapp og ikke-arbeid på sluttposisjon ved hjelp av JavaScript
Å opprette en tidligere knapp og en neste knapp med ikke-arbeid på begge posisjonene er veldig enkelt å implementere på HTML-elementer ved hjelp av JavaScript. Denne artikkelen kommer til å gå gjennom prosessen trinn for trinn. For å implementere ikke-arbeidene på knappene, skal vi spille med "funksjonshemmet”HTML -elementers eiendom. La oss komme i gang.

Trinn 1: Sett opp HTML-dokumentet

I HTML -dokumentet lager du en senterkode, og i den taggen, oppretter du en

1




Det er noen få ting å merke seg her:

  • TAG inneholder verdien 1, fordi verdiområdet for dette eksemplet kommer til å være fra 1 til 7 og de vil også være sluttposisjonen.

  • Ved pressen på neste knapp, Neste () Funksjon blir kalt fra manuset
  • Etter trykket på tilbakeknappen, er tilbake() Funksjon blir kalt fra manuset
  • For referanse har alle tre elementene separate ID -er tildelt dem

Etter det laster websiden med standardverdien satt til “1”Derfor bør tilbakeknappen deaktiveres fra starten av websiden. For dette, bare inkludere en "på Last”Eiendom på tagg og sett den lik klar() funksjon fra skriptfilen som:



Den grunnleggende HTML -malen er konfigurert, og utfører denne HTML -filen kommer til å gi følgende utfall i nettleseren:

Nettleseren viser opp de to knappene og

Tag viser gjeldende verdi.

Trinn 2: Deaktivere tilbakeknappen på webpestens komplette belastning

Som nevnt før, skal back-knappen være deaktivert når nettsiden er lastet fordi verdien er på 1, noe som er en sluttposisjon. Derfor, inne i skriptfilen, refererer du til de 3 elementene i HTML -websiden ved å bruke IDene sine og lagre referansen deres i separate variabler.

BackButton = dokument.getElementById ("tilbake");
NextButton = Dokument.getElementById ("neste");
nummer = dokument.getElementById ("nummer");

Lag også en ny variabel og sett verdien lik 1. Denne variabelen kommer til å vise frem verdien av var i = 1;

Etter det, lag funksjonen klar (), som vil bli påkalt på fullstendig lasting av websiden, og i den funksjonen deaktiver du enkel -knappen med å bruke følgende linjer:

funksjon klar ()
tilbake knapp.deaktivert = sant;

På dette tidspunktet ser HTML ut som følgende når den er lastet:

Trinn 3: Legge til funksjonalitet til neste knapp

For å legge til en funksjon til HTML -nettsiden, oppretter du neste () -funksjonen som kommer til å bli kalt til å klikke på neste knapp og full fungerende funksjonalitet med følgende linjer:

funksjon neste ()
i ++;
if (i == 7)
NextButton.deaktivert = sant;

tilbake knapp.deaktivert = falsk;
Antall.indrehtml = i;

I dette kodebiten skjer følgende ting:

  • For det første, øke verdien av "Jeg”Variabel innen 1 fordi hvis neste knapp ikke er deaktivert, betyr det at sluttposisjonen ikke er nådd ennå
  • Sjekk deretter om du øker verdien av "Jeg”Variabel har fått den til å nå sluttposisjonsverdien (som i dette tilfellet er satt til 7), hvis ja, så deaktiver"NextButton”Ved å sette den funksjonshemmede eiendommen til True
  • Hvis neste knapp ble klikket, betyr det at verdien ikke lenger er på en, noe som betyr at rygg -knappen må være aktivert, og sett derfor den funksjonshemmede egenskapen til FALSE
  • På slutten, endre verdien i vår

    Tag ved å sette sin indrehtml -verdi til “Jeg”

På dette tidspunktet vil HTML -websiden gi følgende utdata:

Det fremgår av utdata at når verdien endres fra 1 (nedre endeposisjon) er tilbake -knappen aktivert. Og når verdien når 7 (maksimal sluttposisjon), er neste knapp aktivert.

Trinn 4: Legge til funksjonalitet til tilbake -knappen

Lag den back () -funksjonen som kommer til å bli kalt til å klikke på back -knappen og implementere full arbeidsfunksjonalitet med følgende linjer:

funksjon tilbake ()
Jeg--;
if (i == 1)
tilbake knapp.deaktivert = sant;

NextButton.deaktivert = falsk;
Antall.indrehtml = i;

Følgende ting skjer i dette kodebiten:

  • For det første, reduser verdien av "Jeg”Variabel etter 1 fordi hvis tilbake -knappen ikke er deaktivert, betyr det at den nedre endestilling ikke er nådd ennå
  • Kontroller deretter om å øke verdien av "jeg" -variabelen har ført til at den når den nedre endeposisjonsverdien (som i dette tilfellet er satt til 1), hvis ja, så deaktiver "tilbake knapp”Ved å sette den funksjonshemmede eiendommen til True
  • Hvis rygg -knappen ble klikket, betyr det at verdien ikke lenger er på 7, noe som betyr at neste knapp må være aktivert
  • På slutten, endre verdien i vår

    Tag ved å sette sin indrehtml -verdi til “jeg”

På dette tidspunktet har HTML fullstendig funksjonalitet som vist nedenfor:

Det fremgår av utgangen at begge knappene fungerer perfekt og at ikke-arbeid på sluttposisjonen også fungerer.

Konklusjon

Denne artikkelen har forklart hvordan du oppretter to knapper på en HTML -webside og implementerer deres arbeid. Og også implementere en ikke-arbeidende logikk for å deaktivere knappen når sluttposisjonen er nådd. For å implementere ikke-arbeidsknappene, må du bare angi den funksjonshemmede egenskapen til HTML-elementet ved hjelp av JavaScript

PHP
Hvordan du bruker mens du sløyfe i php?
Mens Loop er et avgjørende konsept som brukes til å utføre en kodeblokk gjentatte ganger til en spes...
Daniel Johnsen
PHP
Hvordan du bruker array_merge -funksjonen i php?
Array_Merge () -funksjonen i PHP lar deg kombinere flere matriser til en. Følg denne artikkelen for ...
Daniel Johnsen
Git
Hva er trinnene for å gi nytt navn til en fil i git?
For å gi nytt navn til en fil i Git, først, flytt til rotkatalogen og liste opp innholdet. Kjør dere...
Erik Røed