Como alternar um botão em javascript
- Como alternar um botão em javascript?
- Exemplo 1: Modificando mensagens de texto alternando um botão
- Exemplo 2: Antigando o botão ON/OFF em JavaScript
Como alternar um botão em javascript?
Uma declaração condicional é um requisito básico para alternar um botão em JavaScript. Para conseguir isso, você precisa obter o elemento e, em seguida, alguma função personalizada é aplicada para aplicar alguma operação específica nesse elemento. A função está associada ao evento OnClick do botão. Para que, sempre que o botão for clicado, essa função será executada. Vamos praticar alguns exemplos para alternar um botão em JavaScript.
Exemplo 1: Modificando mensagens de texto alternando um botão
Um exemplo é considerado para modificar uma mensagem alternando um botão em javascript. O exemplo compreende o código HTML e JavaScript, que são explicados abaixo:
Código HTML
Exemplo para alternar um botão
Pressione o botão para ver mágica
No código HTML, a descrição é a seguinte:
- A A tag é criada com um "id = js”.
- Depois disso, um botão é criado associado a um “Btntog ()” método. Pressionando "Botão", o método "btntog ()”É acionado.
- No final, o arquivo JavaScript "teste.js " é passado como src dentro deTag.
O código para o arquivo JavaScript “teste.JS”É fornecido aqui:
Código JavaScript
funbtTNTOG ()var t = documento.getElementById ("js");
se (t.innerhtml == "Welcome to linuxhint")
t.INNERHTML = "Javascript World";
outro
t.INNERHTML = "Bem -vindo ao Linuxhint";
Neste código:
- getElementById é utilizado para extrair o elemento html “JS”E o valor é armazenado em uma variável“t”.
- Depois disso, o Innerhtml A propriedade é empregada na condição IF para verificar o texto “Bem -vindo ao Linuxhint”.
- Se a condição for verdadeira, o conteúdo “Bem -vindo ao Linuxhint”É substituído por “Javascript World““.
- Se a condição for falsa, o texto “Bem -vindo ao Linuxhint” é atribuído como conteúdo HTML para a tag div.
Saída
A saída mostra que alternar um botão retorna duas mensagens como “Bem -vindo ao Linuxhint” e “Javascript World” alternativamente.
Exemplo 2: Antigando o botão ON/OFF em JavaScript
Um exemplo é seguido para alterar o texto em linha do botão. Neste exemplo, o “LIGADO DESLIGADO”O texto alterará alternativamente o valor pressionando o botão. Os códigos HTML e JavaScript são fornecidos aqui:
Código HTML
Exemplo para alternar um botão
OnClick = "Tgl ();">
O código acima é descrito como:
- Um botão clicável com um ID de "Mybtn" é criado e seu valor está definido como "DESLIGADO".
- Pressionando o botão, o tgl () Método será acionado.
- No fim, "teste.js " está anexado ao caminho da fonte dentro marcação.
Código JavaScript
functionTGL ()var t = documento.getElementById ("mybtn");
se (t.valor == "on")
t.value = "off";
elseif (t.value == "off")
t.value = "on";
Neste código:
- A tgl () O método é utilizado para alternar um botão em JavaScript.
- Neste método, você extrai o elemento HTML empregando o getElementById propriedade, e então a instrução if else-se é adicionada a ela.
- Se o “Valor == On”, alternar o valor para "DESLIGADO". Se o valor for DESLIGADO, então o valor será alternado para “SOBRE".
Saída
A saída mostra que o botão foi alternado DESLIGADO para SOBRE.
Isso é tudo! Você aprendeu a alternar um botão em JavaScript.
Conclusão
No JavaScript, um botão pode ser usado para alternar entre vários estados de seus próprios valores, ou qualquer função pode ser associada à operação de alternância. O OnClick () evento do botão está associado à função. Este artigo explica uma visão geral da alternativa de um botão junto com dois exemplos práticos. O primeiro exemplo extrai o texto pelo Innerhtml propriedade e modifica -a através de um botão de alternância. No segundo exemplo, o valor do próprio botão é alterado usando uma função personalizada.