Cómo crear el botón anterior y siguiente y no trabajar en la posición final usando JavaScript

Carolina Guzmán
Cómo crear el botón anterior y siguiente y no trabajar en la posición final usando JavaScript
Crear un botón anterior y un botón siguiente con la no trabajo en ambas posiciones es realmente fácil de implementar en elementos HTML con la ayuda de JavaScript. Este artículo va a pasar por el proceso paso a paso. Para implementar la falta de trabajo de los botones, vamos a jugar con el "desactivado"Propiedad de los elementos HTML. Empecemos.

Paso 1: Configurar el documento HTML

En el documento HTML, cree una etiqueta central y en esa etiqueta, cree un

1




Hay algunas cosas a tener en cuenta aquí:

  • La etiqueta contiene el valor 1, porque el rango de valor para este ejemplo será de 1 a 7 y esas también serán la posición final.

  • Al presionar el botón siguiente, el próximo() se llama a la función desde el script
  • Al presionar el botón Atrás, el atrás() se llama a la función desde el script
  • Para hacer referencia, los tres elementos tienen ID separados asignados a ellos

Después de eso, la página web se carga con el valor predeterminado establecido en "1"Por lo tanto, el botón Atrás debe deshabilitarse desde el inicio de la página web. Para esto, simplemente incluya un "encendido"Propiedad en el etiqueta y configúrela igual a la listo() función desde el archivo de script como:



Se configura la plantilla HTML básica, ejecutando este archivo HTML proporcionará el siguiente resultado en el navegador:

El navegador muestra los dos botones y el

La etiqueta está mostrando el valor actual.

Paso 2: Deshabilitar el botón Atrás en la carga completa de la página web

Como se mencionó anteriormente, el botón de retroceso debe deshabilitarse cuando la página web se carga porque el valor es en 1, que es una posición final. Por lo tanto, dentro del archivo de script, haga referencia a los 3 elementos de la página web HTML usando sus ID y almacene su referencia en variables separadas.

BackButton = documento.getElementById ("Back");
nextButton = documento.getElementById ("Siguiente");
número = documento.getElementById ("número");

Además, cree una nueva variable y establezca su valor igual a 1. Esta variable va a mostrar el valor del var i = 1;

Después de eso, cree la función Ready (), que se convocará en la carga completa de la página web, y en esa función Simple deshabilita el botón Atrás utilizando las siguientes líneas:

función lista ()
botón de retroceso.discapacitado = true;

En este punto, el HTML se ve como lo siguiente cuando se carga:

Paso 3: Agregar funcionalidad al botón siguiente

Para agregar una función a la página web HTML, cree la función siguiente () que se solicitará al hacer clic en el botón Siguiente y la funcionalidad de trabajo completa con las siguientes líneas:

función next ()
i ++;
if (i == 7)
siguiente botón.discapacitado = true;

botón de retroceso.discapacitado = falso;
número.innerhtml = i;

En este fragmento de código, las siguientes cosas están sucediendo:

  • En primer lugar, aumente el valor del "i"Variable por 1 porque si el botón siguiente no está deshabilitado, eso significa que la posición final aún no se ha alcanzado
  • Luego verifique si aumenta el valor del "i"La variable ha provocado que alcance el valor de posición final (que en este caso se establece en 7), en caso afirmativo, luego deshabilite el"siguiente botón"Estableciendo la propiedad deshabilitada en verdad
  • Si se hizo clic en el siguiente botón, eso significa que el valor ya no está en uno, lo que significa que el botón de retroceso debe estar habilitado, por lo tanto, configure su propiedad deshabilitada en falso
  • Al final, cambie el valor dentro de nuestro

    Etiqueta estableciendo su valor interno en "i"

En este punto, la página web HTML dará la siguiente salida:

Está claro de la salida que cuando el valor cambia de 1 (posición de extremo inferior) está habilitado el botón de retroceso. Y también, cuando el valor alcanza las 7 (posición final máxima), el botón siguiente está habilitado.

Paso 4: Agregar funcionalidad al botón Atrás

Cree la función Back () que se solicitará hacer clic en el botón Atrás e implementar la funcionalidad de trabajo completa con las siguientes líneas:

function back ()
i--;
if (i == 1)
botón de retroceso.discapacitado = true;

siguiente botón.discapacitado = falso;
número.innerhtml = i;

Las siguientes cosas están sucediendo en este fragmento de código:

  • En primer lugar, disminuya el valor del "i"Variable por 1 porque si el botón de retroceso no está deshabilitado, eso significa que la posición del extremo inferior aún no se ha alcanzado
  • Luego, verifique si aumentar el valor de la variable "I" ha provocado que alcance el valor de posición final inferior (que en este caso se establece en 1), en caso afirmativo, luego desactive el "botón de retroceso"Estableciendo la propiedad deshabilitada en verdad
  • Si se hizo clic en el botón Atrás, eso significa que el valor ya no está en 7, lo que significa que el botón siguiente debe estar habilitado, por lo tanto, establecer su propiedad deshabilitada en falso
  • Al final, cambie el valor dentro de nuestro

    Etiqueta estableciendo su valor interno en "i"

En este punto, el HTML tiene una funcionalidad completa como se muestra a continuación:

Desde la salida está claro que ambos botones funcionan perfectamente y que la posición de no trabajar en el extremo también funciona.

Conclusión

Este artículo ha explicado cómo crear dos botones en una página web HTML e implementar su trabajo. Y también, implementa una lógica no de trabajo para deshabilitar el botón cuando se alcanza la posición final. Para implementar los botones que no funcionan, simplemente establezca la propiedad deshabilitada del elemento HTML utilizando el JavaScript

php
Cómo usar la función php str_split
La función php str_split () es una herramienta útil para dividir las cadenas en caracteres individua...
Lorenzo Canales
c agudo
Cómo usar la palabra clave larga en C#
La palabra clave larga en C# puede definir una variable que puede contener un valor entero firmado e...
Pilar Alemán
c agudo
Cómo usar la herencia en C#
La herencia permite que una clase herede propiedades y métodos de otra clase. Permite la creación de...
Daniela Villaseñor