Comment créer le bouton précédent et suivant et non-travail en position d'extrémité à l'aide de JavaScript

Ethan Guillot
Comment créer le bouton précédent et suivant et non-travail en position d'extrémité à l'aide de JavaScript
La création d'un bouton précédent et d'un bouton suivant avec le non-travail sur les deux positions est vraiment facile à mettre en œuvre sur les éléments HTML à l'aide de JavaScript. Cet article va passer par le processus étape par étape. Pour implémenter le non-travail des boutons, nous allons jouer avec le «désactivé»Propriété des éléments HTML. Commençons.

Étape 1: configurer le document HTML

Dans le document HTML, créez une balise centrale, et dans cette balise, créez un

1




Il y a quelques choses à noter ici:

  • La balise contient la valeur 1, car la plage de valeur de cet exemple sera de 1 à 7 et celles-ci seront également la position finale.

  • En appuyant sur le bouton suivant, le suivant() La fonction est appelée du script
  • En appuyant sur le bouton arrière, le dos() La fonction est appelée du script
  • Pour référence, les trois éléments ont des ID séparés qui leur sont attribués

Après cela, la page Web se charge avec la valeur par défaut définie sur «1"Par conséquent, le bouton arrière doit être désactivé depuis le début de la page Web. Pour cela, incluez simplement un «en charge»Propriété sur le étiquette et définissez-le égal au prêt() Fonction du fichier de script comme:



Le modèle HTML de base est configuré, l'exécution de ce fichier HTML va fournir le résultat suivant sur le navigateur:

Le navigateur apparaît les deux boutons et le

La balise affiche la valeur actuelle.

Étape 2: Désactivation du bouton de retour sur la charge complète de la page Web

Comme mentionné précédemment, le bouton de retour doit être désactivé lorsque la page Web est chargée car la valeur est à 1, ce qui est une position finale. Par conséquent, à l'intérieur du fichier de script, référencez les 3 éléments de la page Web HTML à l'aide de leurs ID et stockez leur référence dans des variables distinctes.

Backbutton = document.getElementById ("back");
NextButton = document.getElementById ("Suivant");
nombre = document.getElementById ("numéro");

Créez également une nouvelle variable et définissez sa valeur égale à 1. Cette variable va présenter la valeur du var i = 1;

Après cela, créez la fonction Ready (), qui sera appelée sur le chargement complet de la page Web, et dans cette fonction, il est simple de désactiver le bouton de retour à l'aide des lignes suivantes:

fonction ready ()
backbutton.désactivé = true;

À ce stade, le HTML ressemble à ce qui suit lorsqu'il est chargé:

Étape 3: Ajout de fonctionnalités au bouton suivant

Pour ajouter une fonction à la page Web HTML, créez la fonction suivante () qui sera appelée en cliquant sur le bouton Suivant et la fonctionnalité de travail complète avec les lignes suivantes:

fonction suivant ()
i ++;
if (i == 7)
Nextbutton.désactivé = true;

backbutton.désactivé = false;
nombre.innerHtml = i;

Dans cet extrait de code, les choses suivantes se produisent:

  • Tout d'abord, augmentez la valeur du «je”Variable par 1 car si le bouton suivant n'est pas désactivé, cela signifie que la position finale n'a pas encore été atteinte
  • Vérifiez ensuite si l'augmentation de la valeur du «je»La variable l'a amené à atteindre la valeur de position finale (qui dans ce cas est définie à 7), si oui, désactivez le«Nextbutton»En définissant la propriété désactivée sur true
  • Si le bouton Suivant a été cliqué, cela signifie que la valeur n'est plus à un seul, ce qui signifie que le bouton de retour doit être activé, par conséquent, définissez sa propriété désactivée sur false
  • À la fin, modifiez la valeur à l'intérieur de notre

    TAG en définissant sa valeur innerhtml sur «je"

À ce stade, la page Web HTML donnera la sortie suivante:

Il est clair à partir de la sortie que lorsque la valeur change de 1 (position d'extrémité inférieure), le bouton arrière est activé. Et aussi, lorsque la valeur atteint 7 (position finale maximale), le bouton suivant est activé.

Étape 4: Ajout de fonctionnalités au bouton arrière

Créez la fonction arrière () qui sera appelée en cliquant sur le bouton Retour et implémentez la fonctionnalité de travail complète avec les lignes suivantes:

fonction back ()
je--;
if (i == 1)
backbutton.désactivé = true;

Nextbutton.désactivé = false;
nombre.innerHtml = i;

Les choses suivantes se produisent dans cet extrait de code:

  • Premièrement, diminuez la valeur du «je”Variable par 1 car si le bouton arrière n'est pas désactivé, cela signifie que la position d'extrémité inférieure n'a pas encore été atteinte
  • Vérifiez ensuite si l'augmentation de la valeur de la variable «I» l'a fait atteindre la valeur de position d'extrémité inférieure (qui dans ce cas est définie à 1), si oui, désactivez le «backbutton»En définissant la propriété désactivée sur true
  • Si le bouton arrière a été cliqué, cela signifie que la valeur n'est plus 7, ce qui signifie que le bouton suivant doit être activé, par conséquent, définir sa propriété désactivée sur false
  • À la fin, modifiez la valeur à l'intérieur de notre

    Étiquette en définissant sa valeur innerhtml sur «i»

À ce stade, le HTML a une fonctionnalité complète comme affiché ci-dessous:

Il ressort clairement de la sortie que les deux boutons fonctionnent parfaitement et que la position finale qui ne fonctionne pas fonctionne également.

Conclusion

Cet article a expliqué comment créer deux boutons sur une page Web HTML et implémenter leur travail. Et aussi, implémentez une logique non-travail pour désactiver le bouton lorsque la position finale est atteinte. Pour implémenter les boutons non-travail, définissez simplement la propriété désactivée de l'élément HTML à l'aide du JavaScript

php
Comment utiliser la fonction Array_Merge dans PHP?
La fonction Array_merge () dans PHP vous permet de combiner plusieurs tableaux en un. Suivez cet art...
Mélissa Vincent
php
Comment utiliser la fonction substr_replace en php
Dans PHP, substr_replace () est une fonction intégrée utilisée pour remplacer une partie d'une chaîn...
Nathan Blanc
php
Qu'est-ce qu'une interface dans PHP orienté objet
Les interfaces définissent un ensemble standard d'actions que diverses classes peuvent utiliser pour...
Mélissa Vincent