Jump to content
  • 0
Rafael Guia

Como fazer com que um botão mude de cor ao ser clicado e volte a cor original após se clicado novamente?

Question

Olá galera, boa tarde!

 

Alguém pode me ajudar?

Gostaria de clicar no link (que estou utilizando como botão) e que ele mudasse de cor, porém ao clicar novamente, preciso que ele volte a cor normal. 

Ps.: Não tenho como usar jQuery.

 

Segue o código:

 

Utilizei "onDblClick", mas não ficou bom, preciso dar apenas 1 click para voltar a formatação normal.

 

<tr>
      <td width="70%" class="tt">CPF</td>
      <td width="30%"><a href="#vazio" class="check" onClick="this.className='active'" onDblClick="this.className='check'">OK</a></td>
    </tr>

 

 

Grato,

Edited by Alaerte Gabriel
Adição da tag CODE

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 1

Cria uma variável de controle 0,1

 

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>

<body>

<a href="#" id="demo" class="button" onclick="myFunction()">Link Button</a>

<script>
var controle = 0;
function myFunction() {
    
    if(controle ==0){
    	document.getElementById("demo").style.background = "blue";
        controle++;
        }
    else{
    	document.getElementById("demo").style.background = "green";
        controle--;
        }
}
</script>

</body>
</html>

 

  • +1 1

Share this post


Link to post
Share on other sites
  • 0

Olha só este exemplo abaixo.

Usando o "classList.toggle", a classe "ok" será incluída caso não exista no elemento, e será retirada caso exista.

Ela irá sofrer uma inversão.

<tr>
   <td width="70%" class="tt">CPF</td>
   <td width="30%">
     <a href="#vazio" class="check" onclick="this.classList.toggle('ok')" >OK</a>
  </td>
</tr>

 

Share this post


Link to post
Share on other sites
  • 0
Em 11/01/2018 at 16:49, kim.y disse:

Cria uma variável de controle 0,1

 


<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>

<body>

<a href="#" id="demo" class="button" onclick="myFunction()">Link Button</a>

<script>
var controle = 0;
function myFunction() {
    
    if(controle ==0){
    	document.getElementById("demo").style.background = "blue";
        controle++;
        }
    else{
    	document.getElementById("demo").style.background = "green";
        controle--;
        }
}
</script>

</body>
</html>

 

boa tarde parceiro de programação, to terminando meu tcc em programação web e seu código me ajudou em parte, eu preciso mais de um botão pra fazer essa mesma função, explicando melhor, cada botão teria que funcionar independente com a mesma função aplicada no seu código para um botão, mas no meu caso em mais de um. teria como me ajudar ? abraços 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By juh2425
      Boa noite pessoal
      estou com um dificuldade em como faço uma validação de data atual no caso não pode ser permitido data maior que a data atual do dia ja fiz da data em branco alguem poderia de auxilar:
       
       <script>
                  $("#btn__Gravar").click(function () {
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Selecionar o tipo do movimento");
                          return false;
                      }
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Selecionar a categoria do movimento");
                          return false;
                      }
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Prencher o campo data movimento");
                          return false;
                      }
                      if ($("#valor_movimento").val().trim() == "") {
                          alert("Prencher o campo data movimento");
                          return false;
                      }
                  })
              </script>
    • By frodrigues49
      function getProduto(a){ var a = $(a) var idproduto = a.parent().parent().parent().find(".idproduto"); var produto = a.parent().parent().parent().find(".produto"); var preco = a.parent().parent().parent().find(".preco"); var vId = idproduto.val(); var vProduto = produto.val(); var vPreco = preco.val(); var vQnt = 1; var vTotal = (parseFloat(vQnt) * parseFloat(vPreco)); var prodAdd = false; $(".id").each(function(index, value) { if ($(value).val() == vId) { $('input[id^="pqnt"]').get(0).value++ ; prodAdd = true; } }); if (!prodAdd) { var cont=0; var linha = '<tr class="selected" id="linha'+cont+'">'+ '<td>'+ '<input class="id" type="hidden" name="idproduto[]" value="'+vId+'">'+vProduto+ '</td>'+ '<td>'+ '<input id="preco" type="text" class="form-control text-right" name="preco[]" value="'+vPreco+'" onblur="multiplicar();" onblur="formatar();">'+ '</td>'+ '<td>'+ '<input id="pqnt" type="text" class="form-control text-center" name="qnt[]" value="'+vQnt+'"><span class="vlr">'+ '</td>'+ '<td>'+ '<input style="text-align: right;" id="subtotal" class="form-control subtotal" type="hidden" value="'+vTotal+'" readonly onblur="calcular();">'+ '<input style="text-align: right;" type="text" class="form-control subtotalT" id="subtotalT" name="subtotal[]" value="'+numberToReal(vTotal)+'" readonly>'+ '</td>'+ '<td class="text-center">'+ '<a style="cursor:pointer" onclick="deleteRow(this)" class="glyphicon glyphicon-trash"></a>'+ '</td>'+ ' </tr>' cont++; $('#mytbody').append(linha); contItem(); calcular(); $(".subtotal").each(function() { $(this).blur(function(){ calcular(); }); }); } } Boa tarde
       
      Estou fazendo um projeto em laravel de um pdv. Gostaria de quando clicar na imagem do pruduto ele inserisse na lista, porem ao clicar novamente ele aumentasse a qnt e nao inserisse. Conforme imagem em anexo.

    • By David Samu
      let total_entradas = 3//ai virar total de colunas
      let total_linhas   = 0
      let tabela         = []
      for(let coluna=total_entradas; coluna>0; coluna-- )
      {
          let repeticao = 1
          for(let x=1; x<=coluna; x++)
          {
              repeticao = (2 * repeticao)
          }
          if( total_linhas === 0 )
          {
              total_linhas = repeticao
          }
          if(repeticao != 1) 
          {
              repeticao = (repeticao / 2)
          }
          let valores = []
          let vdd     = 1
          let lastBoo = 'v'
          for( let linha=0; linha < total_linhas; linha++ )
          {
              if( vdd <= repeticao )
              {
                  val = lastBoo
              }
              else
              {
                  if( lastBoo == 'v' )
                  {
                      lastBoo = 'f'  
                  }
                  else 
                  {
                      lastBoo = 'v'
                  }
                  val = lastBoo
                  vdd=1
              }
              vdd++
              valores.push(val)
          }
          tabela[ (coluna - 1) ] = valores   
      }
      let countCol = 1
      for(let coluna=tabela.length - 1; coluna>=0; coluna--)
      {
          console.log("Coluna ", countCol++)
          for(let linha = 0; linha < tabela[coluna].length; linha ++)
          {
              console.log( tabela[coluna][linha] )
          }
      }
    • By andrelimaverde
      Pessoal preciso de uma ajuda, desde já agradeço à todos.
      "Site teste, estudos..."
      Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).
      Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]
      Exemplo:  Pagina 1 - envia para action '1.php'
      Nome: 
      Telefone:
      <input type="submit" value="Continuar">
      (
       O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   
       Assim como os outros php's
      )
      Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 
      Cidade:
      Endereço:
      <input type="submit" value="Continuar">
       
      A questão está na 3ª página
      Página 3 -
      Email:
      (Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 
      No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...
    • By Wilson Fernandes
      Olá! Preciso de ajuda para começar a construir gráficos de funções quadráticas em plano cartesiano. Já procurei várias fontes, mas nenhuma explica como construir um bom gráfico.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.