Onclick, With two "Actions" on the same button. PHP

Asked

Viewed 1,083 times

0

I would like to make a button that when clicking perform action 1 of the onclick and when clicking again perform action 2 and after clicking again perform the 1, and so on.

php html

  • For what purpose? Depending on what you have in mind, there are more practical and simple ways to do.

3 answers

1


There are N ways to accomplish this functionality. I’ll illustrate using a data-attribute to the HTML element to define/synchronize which action should be executed.

As in the example below.

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>

The attribute data-action define which action should be executed. Already the function teste, after performing the action, changes the data-action for the next action that will be executed.

Update

As described in the comments, what the author wants is a "toggle" effect. To switch between visible and non-visible.

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>

Basically the function will validate itself in the list of class of the element exists the class hide. If it exists, it will remove it. Otherwise, it will add it.

A class hide, in turn, defines the display of the element as none. It is better to use a class, instead of directly changing the display, because, some elements may have a specific display, which will be lost if you do not save it when adding it again to the element.

  • Here’s what I wanted to do. With first action - onClick="Document.getElementById('Invi').style.display = '';" As second action - onClick="Document.getElementById('Invi').style.display = 'None';"

  • @Guilhermefreitas this is not what your question is asking/describing. However, it is much easier. I will update the answer,

  • OK thank you very much, sorry for the doubt I’m still beginner

  • @Updated

0

You can add a variable to serve as a flag, which receives true/false, or clicked, null, anyway.

As he clicks the button, you do the necessary checks, and change the flag.

But as our friend commented, depending on what you want to do, there are more practical methods.

-1

Guilherme, follows a suggestion for this, using 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();" );
}

Browser other questions tagged php html

You are not signed in. Login or sign up in order to post.