Como criar o botão anterior e próximo e não trabalha na posição final usando JavaScript

Bryant Rowe Sr.
Como criar o botão anterior e próximo e não trabalha na posição final usando JavaScript
Criar um botão anterior e um botão próximo com o não-trabalho em ambas as posições é realmente fácil de implementar em elementos HTML com a ajuda do JavaScript. Este artigo passará pelo processo passo a passo. Para implementar o não trabalho dos botões, vamos brincar com o “desabilitadoPropriedade dos elementos HTML. Vamos começar.

Etapa 1: configure o documento HTML

No documento HTML, crie uma etiqueta central e nessa tag, crie um

1




Há algumas coisas a serem observadas aqui:

  • A tag contém o valor 1, porque o intervalo de valor para este exemplo será de 1 a 7 e esses também serão a posição final.

  • Após o pressionamento do próximo botão, o próximo() A função está sendo chamada do script
  • Após a imprensa do botão traseiro, o voltar() A função está sendo chamada do script
  • Para referência, todos os três elementos têm IDs separados atribuídos a eles

Depois disso, a página da web é carregada com o valor padrão definido como “1”Portanto, o botão traseiro deve ser desativado desde o início da página da web. Para isso, basta incluir um “carregando”Propriedade no tag e defina -o igual ao preparar() função do arquivo de script como:



O modelo HTML básico está configurado, a execução deste arquivo HTML fornecerá o seguinte resultado no navegador:

O navegador mostra os dois botões e o

A tag está exibindo o valor atual.

Etapa 2: Desativando o botão de volta na carga completa da página da web

Como mencionado anteriormente, o botão traseiro deve ser desativado quando a página da web é carregada porque o valor está em 1, que é uma posição final. Portanto, dentro do arquivo de script, faça referenciar os 3 elementos da página da Web HTML usando seus IDs e armazenar sua referência em variáveis ​​separadas.

BackButton = Document.getElementById ("volta");
NextButton = Document.getElementById ("Next");
número = documento.getElementById ("número");

Além disso, crie uma nova variável e defina seu valor igual a 1. Esta variável estará mostrando o valor do var i = 1;

Depois disso, crie a função pronta (), que será chamada no carregamento completo da página da web e nessa função Desativar o botão de volta usando as seguintes linhas:

função pronta ()
botão "voltar.desativado = true;

Neste ponto, o HTML se parece com o seguinte quando carregado:

Etapa 3: Adicionando funcionalidade ao próximo botão

Para adicionar uma função à página da web html, crie a função Next () que será chamada ao clicar no botão Next e a funcionalidade completa de trabalho com as seguintes linhas:

função a seguir ()
i ++;
if (i == 7)
Próximo botão.desativado = true;

botão "voltar.desativado = false;
número.inerhtml = i;

Neste trecho de código, as seguintes coisas estão acontecendo:

  • Em primeiro lugar, aumente o valor do “eu”Variável por 1 porque se o próximo botão não estiver desativado, isso significa que a posição final ainda não foi
  • Então verifique se aumentar o valor do “eu”Próximo botão”Ao definir a propriedade desativada como true
  • Se o botão próximo foi clicado, isso significa que o valor não está mais em um, o que significa que o botão de volta deve ser ativado, portanto, defina sua propriedade desativada como falsa
  • No final, mude o valor dentro do nosso

    tag definindo seu valor innerhtml como “eu”

Neste ponto, a página da web html fornecerá a seguinte saída:

Fica claro na saída que, quando o valor muda de 1 (posição da extremidade inferior), o botão traseiro é ativado. E também, quando o valor atingir 7 (posição final máxima), o próximo botão é ativado.

Etapa 4: Adicionando funcionalidade ao botão de volta

Crie a função back () que será chamada ao clicar no botão Voltar e implementar a funcionalidade de funcionamento completa com as seguintes linhas:

function back ()
eu--;
if (i == 1)
botão "voltar.desativado = true;

Próximo botão.desativado = false;
número.inerhtml = i;

As seguintes coisas estão acontecendo neste trecho de código:

  • Em primeiro lugar, diminua o valor do “eu”Variável por 1 porque se o botão de volta ainda não estiver desativado
  • Em seguida, verifique se o aumento do valor da variável "i" fez com que ela atinja o valor da posição final inferior (que neste caso está definido em 1), se sim, desative o “botão "voltar”Ao definir a propriedade desativada como true
  • Se o botão traseiro foi clicado, isso significa que o valor não está mais em 7, o que significa que o próximo botão deve ser ativado, portanto, defina sua propriedade desativada como falsa
  • No final, mude o valor dentro do nosso

    tag definindo seu valor innerhtml para "eu"

Neste ponto, o HTML possui funcionalidade completa, conforme exibido abaixo:

Fica claro a partir da saída que os dois botões estão funcionando perfeitamente e o não-trabalhador na posição final também está funcionando.

Conclusão

Este artigo explicou como criar dois botões em uma página da web html e implementar seu trabalho. E também, implemente uma lógica não trabalhadora para desativar o botão quando a posição final for alcançada. Para implementar os botões que não são de trabalho, basta definir a propriedade desativada do elemento HTML usando o JavaScript

Git
Comando Git-Stash em Git | Explicado
O comando git stash é usado para salvar temporariamente mudanças não comprometidas que os usuários f...
Joey Bartoletti
C Programação
Como usar a palavra -chave Register em C
Em C, a palavra -chave Register direciona o compilador para determinar que uma variável específica d...
Benny Hilll DDS
C ++
Como passar argumentos para funções em C ++ por valor vs. Por referência?
Uma cópia da variável é feita para a função quando os argumentos são passados ​​por valor. A variáve...
Pedro Macejkovic