Gostaria de fazer um botao que ao clicar realizasse a ação 1 do onclick e quando clicasse denovo realizasse a ação 2 e depois de clicar novamente realizasse a 1, e assim sucessivamente.
3 Respostas
Existe N maneiras de realizar essa funcionalidade. Eu vou exemplificar utilizando um data-attribute
ao elemento HTML para definir/sincronizar qual a ação que deve ser executada.
Como no exemplo abaixo.
function test(element)
{
if (element.getAttribute('data-action') == 1)
{
alert("Executando a ação 1...");
element.setAttribute('data-action' , 2);
}
else
{
alert("Executando a ação 2...");
element.setAttribute('data-action' , 1);
}
}
<a href="#" data-action="1" onclick="test(this);" >ação</a>
O atributo data-action
define qual action deve ser executada. Já a função teste
, após executar a ação, altera o data-action
para a próxima ação que será executada.
Update
Conforme descrito nos comentários, o que o autor quer é um efeito "toggle". Para alternar entre visível e não visível.
function toggle(id)
{
document.getElementById(id).classList.toggle('hide');
}
.hide
{
display: none;
}
<a href="#" onclick="toggle('element-id');" >alternar</a>
<div id="element-id" >elemento</div>
Basicamente a função irá validar se na lista de class
do elemento existe a class
hide
. Caso existir, irá removê-la. Do contrário, irá adicioná-la.
A class hide
, por sua vez, define o display
do elemento como none
. É melhor utilizar uma class
, ao invés de alterar diretamente o display
, pois, alguns elementos podem possuir um display em específico, que será perdido caso você não o salve quando adicionar ele novamente ao elemento.
-
Queria fazer o seguinte. Com primeira ação - onClick="document.getElementById('invi').style.display = '';" Como segunda ação - onClick="document.getElementById('invi').style.display = 'none';" 2/08/2018 às 16:15
-
@GuilhermeFreitas isso não é o que a sua questão está solicitando/descrevendo. Entretanto, é bem mais fácil. Vou atualizar a resposta, 2/08/2018 às 16:21
-
-
Você pode adicionar uma variável pra servir de flag, que recebe true/false, ou clicado, null, enfim.
Conforme ele clica no botão, você faz as verificações necessárias, e altera a flag.
Mas como nosso amigo comentou, dependendo do que você quer fazer, há métodos mais práticos.
Guilherme, segue uma sugestão para isso, usando JavaScript:
HTML:
<input id="botao" type="button" onclick="Funcao1();>
Javascript:
function Funcao1(){
// Faz o que você precisa
// Altera a função do click para a função 2
document.getElementById("botao").setAttribute( "onClick", "javascript: Funcao2();" );
}
function Funcao2(){
// Faz o que você precisa
// Altera a função do click para a função 1
document.getElementById("botao").setAttribute( "onClick", "javascript: Funcao1();" );
}