Faça um botão de alternância simples em JavaScript

““Alternar”É um termo que se refere à capacidade de mudar algo entre dois estados ou valores diferentes. Em vários cenários, os desenvolvedores precisam criar um botão de alternância em uma página da web, como mostrar e ocultar conteúdo em uma página, clicando na chave para alternar entre dois estados, “sobre" e "desligado", e assim por diante.

Este blog descreverá o método para criar um botão de alternância simples em JavaScript.

Como fazer um botão de alternância simples em JavaScript?

Para fazer um botão de alternância simples, use a lógica condicional simples com o “valor”Atributo para alterar o estado ou valor do botão.

Exemplo 1: alternando o estado do botão

Em um arquivo html, crie um botão e anexe um “ONCLICK”Evento que chamará a função em um botão Clique:

Defina uma função “alternar()”No arquivo javascript ou na tag que acionará o botão Clique:

functionToggle ()

var Button = documento.getElementById ("btn");
if (botão.valor == "aceitar")

botão.value = "rejeitar";

elseif (botão.valor == "rejeitar")

botão.value = "aceitar";

Na função acima definida:

• Primeiro, obtenha a referência do botão usando seu ID atribuído com a ajuda do “getElementById ()”Método.
• Use a instrução condicional e altere o valor ou estado do botão. Defina o valor como “Rejeitar"Se for igual a"Aceitar”.
• Se o valor do botão for "Rejeitar", Defina -o como"Aceitar”.

Saída

Exemplo 2: alternar o estado do botão com cor

Você também pode alternar o estilo com o valor do botão usando o “estilo”Atributo:

functionToggle ()

var Button = documento.getElementById ("btn");
if (botão.valor == "aceitar")

botão.value = "rejeitar";
documento.getElementById ("btn").estilo.Background = "Red";

elseif (botão.valor == "rejeitar")

botão.value = "aceitar";
documento.getElementById ("btn").estilo.Antecedentes = "Amarelo";

Como você pode ver na saída, o botão altera seu valor e cor no botão Clique:

Exemplo 3: alternar o texto

Aqui, vamos alternar o texto no botão Clique. Em um arquivo html, primeiro, crie um botão e um texto usando

tag que não será exibida na página:

Bem -vindo ao Linuxhint

Defina uma função que mostrará o texto na página da web clicando no botão:

functionToggle ()

Var Text = Documento.getElementById ("Welcome");
if (texto.estilo.display === 'nenhum')
texto.estilo.display = 'bloco';
outro
texto.estilo.display = 'nenhum';

Saída

Reunimos todas as informações essenciais relacionadas à criação de um botão de alternância simples em JavaScript.

Conclusão

Para criar um botão de alternância simples, use as instruções lógicas condicionais com o “valor”Atributo para alterar o estado ou valor do botão. Um botão de alternância é um elemento útil da interface do usuário que pode ajudar a melhorar a funcionalidade e a usabilidade dos aplicativos JavaScript. Este blog descreveu o procedimento para criar um botão de alternância simples em JavaScript com exemplos detalhados.