Ir para conteúdo
  • 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?

Pergunta

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,

Editado por Alaerte Gabriel
Adição da tag CODE

Compartilhar este post


Link para o post
Compartilhar em outros sites

2 respostas a esta questão

Recommended Posts

  • 0

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

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Mateus Duarte
      Estou com um problema, meu site mostra notificações apenas se for acessado pelo computador. Quando acessado pelo celular, ele pede para ativar as notificações, porem ele não mostra.
       
      Codigo da função:
      (function(global, factory) { "use strict"; if (typeof define === "function" && define.amd) { define(function() { return new(factory(global, global.document)) }) } else if (typeof module !== "undefined" && module.exports) { module.exports = new(factory(global, global.document)) } else { global.Push = new(factory(global, global.document)) } })(typeof window !== "undefined" ? window : this, function(w, d) { var Push = function() { var self = this, isUndefined = function(obj) { return obj === undefined }, isString = function(obj) { return String(obj) === obj }, isFunction = function(obj) { return obj && {}.toString.call(obj) === "[object Function]" }, currentId = 0, incompatibilityErrorMessage = "PushError: push.js is incompatible with browser.", hasPermission = false, notifications = {}, lastWorkerPath = null, closeNotification = function(id) { var errored = false, notification = notifications[id]; if (typeof notification !== "undefined") { if (notification.close) { notification.close() } else if (notification.cancel) { notification.cancel() } else if (w.external && w.external.msIsSiteMode) { w.external.msSiteModeClearIconOverlay() } else { errored = true; throw new Error("Unable to close notification: unknown interface") } if (!errored) { return removeNotification(id) } } return false }, addNotification = function(notification) { var id = currentId; notifications[id] = notification; currentId++; return id }, removeNotification = function(id) { var dict = {}, success = false, key; for (key in notifications) { if (notifications.hasOwnProperty(key)) { if (key != id) { dict[key] = notifications[key] } else { success = true } } } notifications = dict; return success }, createCallback = function(title, options) { var notification, wrapper, id, onClose; options = options || {}; self.lastWorkerPath = options.serviceWorker || "sw.js"; if (w.Notification) { try { notification = new w.Notification(title, { icon: isString(options.icon) || isUndefined(options.icon) ? options.icon : options.icon.x32, body: options.body, tag: options.tag, requireInteraction: options.requireInteraction }) } catch (e) { if (w.navigator) { w.navigator.serviceWorker.register(options.serviceWorker || "sw.js"); w.navigator.serviceWorker.ready.then(function(registration) { registration.showNotification(title, { body: options.body, vibrate: options.vibrate, tag: options.tag, requireInteraction: options.requireInteraction }) }) } } } else if (w.webkitNotifications) { notification = w.webkitNotifications.createNotification(options.icon, title, options.body); notification.show() } else if (navigator.mozNotification) { notification = navigator.mozNotification.createNotification(title, options.body, options.icon); notification.show() } else if (w.external && w.external.msIsSiteMode()) { w.external.msSiteModeClearIconOverlay(); w.external.msSiteModeSetIconOverlay(isString(options.icon) || isUndefined(options.icon) ? options.icon : options.icon.x16, title); w.external.msSiteModeActivate(); notification = {} } else { throw new Error("Unable to create notification: unknown interface") } id = addNotification(notification); wrapper = { get: function() { return notification }, close: function() { closeNotification(id) } }; if (options.timeout) { setTimeout(function() { wrapper.close() }, options.timeout) } if (isFunction(options.onShow)) notification.addEventListener("show", options.onShow); if (isFunction(options.onError)) notification.addEventListener("error", options.onError); if (isFunction(options.onClick)) notification.addEventListener("click", options.onClick); onClose = function() { removeNotification(id); if (isFunction(options.onClose)) { options.onClose.call(this) } }; notification.addEventListener("close", onClose); notification.addEventListener("cancel", onClose); return wrapper }, Permission = { DEFAULT: "default", GRANTED: "granted", DENIED: "denied" }, Permissions = [Permission.GRANTED, Permission.DEFAULT, Permission.DENIED]; self.Permission = Permission; self.Permission.request = function(onGranted, onDenied) { if (!self.isSupported) { throw new Error(incompatibilityErrorMessage) } callback = function(result) { switch (result) { case self.Permission.GRANTED: hasPermission = true; if (onGranted) onGranted(); break; case self.Permission.DENIED: hasPermission = false; if (onDenied) onDenied(); break } }; if (w.Notification && w.Notification.requestPermission) { Notification.requestPermission(callback) } else if (w.webkitNotifications && w.webkitNotifications.checkPermission) { w.webkitNotifications.requestPermission(callback) } else { throw new Error(incompatibilityErrorMessage) } }; self.Permission.has = function() { return hasPermission }; self.Permission.get = function() { var permission; if (!self.isSupported) { throw new Error(incompatibilityErrorMessage) } if (w.Notification && w.Notification.permissionLevel) { permission = w.Notification.permissionLevel } else if (w.webkitNotifications && w.webkitNotifications.checkPermission) { permission = Permissions[w.webkitNotifications.checkPermission()] } else if (w.Notification && w.Notification.permission) { permission = w.Notification.permission } else if (navigator.mozNotification) { permission = Permissions.GRANTED } else if (w.external && w.external.msIsSiteMode() !== undefined) { permission = w.external.msIsSiteMode() ? Permission.GRANTED : Permission.DEFAULT } else { throw new Error(incompatibilityErrorMessage) } return permission }; self.isSupported = function() { var isSupported = false; try { isSupported = !!(w.Notification || w.webkitNotifications || navigator.mozNotification || w.external && w.external.msIsSiteMode() !== undefined) } catch (e) {} return isSupported }(); self.create = function(title, options) { if (!self.isSupported) { throw new Error(incompatibilityErrorMessage) } if (!isString(title)) { throw new Error("PushError: Title of notification must be a string") } if (!self.Permission.has()) { return new Promise(function(resolve, reject) { self.Permission.request(function() { try { resolve(createCallback(title, options)) } catch (e) { reject(e) } }, function() { reject("Permission request declined") }) }) } else { return new Promise(function(resolve, reject) { try { resolve(createCallback(title, options)) } catch (e) { reject(e) } }) } }; self.count = function() { var count = 0, key; for (key in notifications) { count++ } return count }, self.__lastWorkerPath = function() { return self.lastWorkerPath }, self.close = function(tag) { var key; for (key in notifications) { notification = notifications[key]; if (notification.tag === tag) { return closeNotification(key) } } }; self.clear = function() { var i, success = true; for (key in notifications) { var didClose = closeNotification(key); success = success && didClose } return success } }; return Push }); Como faço para mostrar as notificações pelo celular?
    • Por juliosertori
      Olá boa noite, procurei e não encontrei algo relacionado.
       
      Tenho um Input onde vou mostrar valores somados, e tenho outros input que tem os valores. Existe a possibilidade, de após um evento, ele mandar o valor do input de preços, a somar com o valor já existente ao input de total de valores?
    • Por juliosertori
      Olá boa noite galera, tenho um Repeat que incrementa Preço e Quantidade de um produto.
       
      Estou tentando fazer multiplicação do "preço" * "quantidade" de cada linha do Repeat mas ainda não encontrei uma forma de fazer isso, já que os campos são repetidos com IDS iguais.
       
      A única diferença nos campos é que se cria um Array por exemplo, name="preco[0]", assim por diante.
       
      Mas não tem um Looping para eu criar cada script para multiplicação dos campos e acredito que não seja a maneira correta.
       
      Estou fazendo assim o calculo funciona:
       
      $(document).on('keyup', 'input[id="qtdProds"]', function(){ var tr = $(this).closest('#add_item_list'); var qtde = tr.find('input[id="precoProds"]').val(); var qtde = qtde.toString().replace( "R$ ", "" ); var qtde = qtde.toString().replace( ",", "" ); var vlrunt = $(this).val(); if (qtde && vlrunt){ tr.find('input[id="totalProds"]').val(parseFloat(vlrunt) * parseFloat(qtde)); parseFloat(String('123.456').replace(/[^\d\.]/g, "")).toFixed(2); } }); O problema é que assim da "bug" logicamente, pois não está sendo feito para cada linha do repeat, e sim todos campos com mesmo nome.
       
      Alguém tem uma ideia de como posso fazer isso?
       
      Obrigado!
    • Por LucasFalcao
      Como é feito um PWA, quais os recursos utilizados, oque preciso conhecer para desenvolver um?
    • Por juliosertori
      Olá boa tarde, eu tenho uma listagem que utilizo com JQuery Repeat, e fora ela adiciono novas linhas através de código de barras que o cliente digita, até ai tudo bem, está funcionando perfeitamente essa parte. Consigo adicionar novas linhas no Repeat tanto pelo próprio Repeat, quanto por um Append externo.
       
      O problema está no Array que é criado para enviar o POST.
       
      Criando por exemplo quando adiciono nova linha pelo Repeat:
       
      <input type="text" value="0" name="produtos_pdv[0][qtd]" class="form-control" /> E então ao adicionar novas linhas pelo Repeat, ele adiciona com "produtos_pdv[1][qtd]".
       
      Mas pelo outro Append, não consigo seguir a mesma ordem do Repeat, então fica bagunçado o Array, tentei utilizar o ID do produto como CHAVE, mas ai o Array se desvincula.
       
      Como posso pegar a ultima chave desse Array que está criando "produtos_pdv" para continuar seguindo a ordem no meu Append?
       
      Obrigado!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.