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: alternando o botão ON/OFF em JavaScript

Como alternar um botão em JavaScript?

Uma instruçã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. Assim, 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

Considera-se um exemplo para modificar uma mensagem alternando um botão em JavaScript. O exemplo compreende código HTML e JavaScript, que são explicados abaixo:

Código HTML

Em código HTML, a descrição é a seguinte:

• UMA
  é criada com um “ id=js ”.
• Depois disso, é criado um botão associado a um “btntog()” método. Ao pressionar 'Botão' , o método ' btntog() ” é acionado.
• No final, o arquivo JavaScript “teste.js” é passado como src dentro de
  

  ---

  Código JavaScript

  função btntog ( )
  {
  Onde = documento. getElementById ( 'js' ) ;
  E se ( t. innerHTML == 'Bem-vindo ao Linuxhint' ) {
  t. innerHTML = 'Mundo JavaScript' ; }
  senão {
  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 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 “Mundo JavaScript “.
  • Se a condição for falsa, o texto “Bem-vindo ao Linuxhint” é atribuído como conteúdo HTML à tag div.

  Resultado

  

  A saída mostra que alternar um botão retorna duas mensagens como “Bem-vindo ao Linuxhint” e “Mundo JavaScript” alternativamente.

  Exemplo 2: alternando o botão ON/OFF em JavaScript

  Um exemplo é seguido para alterar o texto embutido do botão. Neste exemplo, o “ LIGADO DESLIGADO ” alterará alternativamente o valor pressionando o botão. Os códigos HTML e JavaScript são fornecidos aqui:

  Código HTML

  < html >
  
  < h2 > Exemplo para alternar um botão h2 >
  
  < tipo de entrada = 'botão' Eu iria = 'meuBtn' valor = 'DESLIGADO'
  
  ao clicar = 'encontro();' >
  
  < script src = 'teste.js' > roteiro >
  
  html >

  O código acima é descrito como:

  • Um botão clicável com um id de “meuBtn” é criado e seu valor é definido como 'DESLIGADO' .
  • Ao pressionar o botão, o encontro() método será acionado.
  • No fim, “teste.js” é anexado ao caminho de origem dentro