Come creare un pulsante precedente e successivo e non working in posizione terminale usando JavaScript

Piererminio De luca
Come creare un pulsante precedente e successivo e non working in posizione terminale usando JavaScript
La creazione di un pulsante precedente e un pulsante successivo con il non lavoro su entrambe le posizioni è davvero facile da implementare su elementi HTML con l'aiuto di JavaScript. Questo articolo passerà attraverso il processo passo dopo passo. Per implementare il non lavoro dei pulsanti, giocheremo con il "Disabilitato"Proprietà degli elementi HTML. Iniziamo.

Passaggio 1: imposta il documento HTML

Nel documento HTML, crea un tag centrale e in quel tag, crea un

1




Ci sono alcune cose da notare qui:

  • Il tag contiene il valore 1, perché l'intervallo di valori per questo esempio sarà da 1 a 7 e quelli saranno anche la posizione finale.

  • Sulla pressione del pulsante successivo, il Prossimo() La funzione viene chiamata dallo script
  • Sulla pressione del pulsante Indietro, il Indietro() La funzione viene chiamata dallo script
  • Per il riferimento, tutti e tre gli elementi hanno ID separati assegnati a loro

Successivamente, la pagina Web si carica con il valore predefinito impostato su "1"Pertanto il pulsante Indietro dovrebbe essere disabilitato dall'inizio della pagina Web. Per questo, includi semplicemente un "Onload"Proprietà sul tagga e impostalo uguale a pronto() funzione dal file di script come:



Viene impostato il modello HTML di base, eseguendo questo file HTML fornirà il seguente risultato sul browser:

Il browser mostra i due pulsanti e il

Il tag sta visualizzando il valore corrente.

Passaggio 2: disabilitazione del pulsante di schiena sul carico completo della pagina web

Come accennato in precedenza, il pulsante Indietro dovrebbe essere disabilitato quando la pagina Web viene caricata perché il valore è a 1, che è una posizione finale. Pertanto, all'interno del file di script, fare riferimento ai 3 elementi della pagina Web HTML utilizzando i loro ID e memorizzare il loro riferimento in variabili separate.

BackButton = Documento.getElementById ("Back");
NextButton = Documento.getElementById ("Next");
numero = documento.getElementById ("numero");

Inoltre, crea una nuova variabile e imposta il suo valore uguale a 1. Questa variabile mostrerà il valore del var i = 1;

Successivamente, crea la funzione pronta (), che verrà chiamata al caricamento completo della pagina web, e in quella funzione semplice Disabilita il pulsante Indietro usando le seguenti righe:

funzione pronta ()
tasto indietro.disabile = true;

A questo punto, l'HTML sembra il seguente quando è stato caricato:

Passaggio 3: aggiunta di funzionalità al pulsante successivo

Per aggiungere una funzione alla pagina Web HTML, crea la funzione Next () che verrà chiamata facendo clic sul pulsante successivo e la funzionalità di lavoro completa con le seguenti righe:

funzione next ()
I ++;
if (i == 7)
NextButton.disabile = true;

tasto indietro.disabile = false;
numero.InnerHtml = i;

In questo frammento di codice, stanno accadendo le seguenti cose:

  • In primo luogo, aumenta il valore di "io"Variabile per 1 perché se il pulsante successivo non è disabilitato, ciò significa che la posizione finale non è stata ancora raggiunta
  • Quindi verificare se aumenti il ​​valore di "io"La variabile lo ha fatto raggiungere il valore della posizione finale (che in questo caso è impostato a 7), se sì, quindi disabilita"NextButton"Impostando la proprietà disabilitata su True
  • Se è stato fatto clic il pulsante successivo, ciò significa che il valore non è più su uno, il che significa che il pulsante Indietro deve essere abilitato, pertanto, impostare la sua proprietà disabilitata su False
  • Alla fine, cambia il valore all'interno del nostro

    tag impostando il suo valore internoio"

A questo punto, la pagina web HTML fornirà il seguente output:

È chiaro dall'output che quando il valore cambia da 1 (posizione di estremità inferiore) il pulsante Indietro è abilitato. E anche, quando il valore raggiunge 7 (posizione massima finale), il pulsante successivo è abilitato.

Passaggio 4: aggiunta di funzionalità al pulsante Indietro

Crea la funzione posteriore () che verrà chiamata facendo clic sul pulsante Indietro e implementa la funzionalità di lavoro completa con le seguenti righe:

funzione back ()
io--;
if (i == 1)
tasto indietro.disabile = true;

NextButton.disabile = false;
numero.InnerHtml = i;

Le seguenti cose stanno accadendo in questo frammento di codice:

  • In primo luogo, diminuire il valore di "io"Variabile per 1 perché se il pulsante Indietro non è disabilitato, ciò significa che la posizione di estremità inferiore non è stata ancora raggiunta
  • Quindi verificare se aumentare il valore della variabile "I" ha fatto sì che il valore della posizione di estremità inferiore (che in questo caso è impostato a 1), se sì, quindi disabilita il "tasto indietro"Impostando la proprietà disabilitata su True
  • Se è stato fatto clic il pulsante Indietro, ciò significa che il valore non è più a 7, significa che il pulsante successivo deve essere abilitato, quindi, impostare la sua proprietà disabilitata su False
  • Alla fine, cambia il valore all'interno del nostro

    tag impostando il suo valore interno a "io"

A questo punto, l'HTML ha funzionalità complete come visualizzato di seguito:

Dall'output è chiaro che entrambi i pulsanti funzionano perfettamente e che non funzioni.

Conclusione

Questo articolo ha spiegato come creare due pulsanti su una pagina web HTML e implementare il proprio lavoro. E inoltre, implementa una logica non lavorativa per disabilitare il pulsante quando viene raggiunta la posizione finale. Per implementare i pulsanti non di lavoro, è sufficiente impostare la proprietà disabilitata dell'elemento HTML utilizzando JavaScript

PHP
Come usare mentre loop in PHP?
Il ciclo while è un concetto cruciale utilizzato per eseguire ripetutamente un blocco di codice fino...
Nick Marini
PHP
Come utilizzare la funzione Array_merge in PHP?
La funzione Array_merge () in PHP consente di combinare più array in uno. Segui questo articolo per ...
Osea Martini
C ++
Come utilizzare l'istruzione switch in c++?
L'istruzione switch è un'istruzione condizionale in C ++ che testa una variabile contro più valori e...
Nunzia Martini