Check number of clicks on buttons

Question

Check number of clicks on buttons

Navigation

#1 by (1 votes)

1

I have a script with functions to control what each button an application does. I declare a global variable so that when all the buttons are clicked, two actions are triggered: hide one div and show another.

//variável global

var completo = 0;

//funções para controlar 9 botões - em cada uma das funções incremento a variável:

function A()
{
     faz qualquer coisa;
     completo++
}
function B()
{
     faz qualquer coisa;
     completo++
} 
function C()
{
     faz qualquer coisa;
     completo++
} 
function D()
{
     faz qualquer coisa;
     completo++
} 
function E()
{
     faz qualquer coisa;
     completo++
} 
function F()
{
     faz qualquer coisa;
     completo++
} 
function G()
{
     faz qualquer coisa;
     completo++
}
function H()
{
     faz qualquer coisa;
     completo++
} 
function I()
{
     faz qualquer coisa;
     completo++
}

So far I should increment 9 times the complete variable, getting full = 9, right?

Then it would trigger action - when the variable reaches 9, hide the general div and show the final div.

if(completo==9)
{
    $('div[id^="final"]').show();
    $('div[id^="geral"]').hide();
}

This last part is not functional.

I have also tested with the following, but to no avail:

if(completo==9)
{
    $("#final").show();
    $("#geral").hide();
}

Can you help me?

In the html part I have declared both the general div and the final div:

<div id="geral">"conteudo blablabla"</div>
<div id="final">"conteudo blablabla"</div>

javascript html jquery css

asked by anonymous 19.02.2015 / 00:45

1 answer

Is there any way to give the columns an automatic width? Request jQuery Post + PHP + MySQL does not write data

score 1 · Answer 1

What Sergio said is correct ... Remember that JS is only loaded once on your page, so it should have a function that checks if its global variable has reached the 9 events of click ...

Pure Js:

function A(){
    teste();
}

function B(){
    teste();
}

function C(){
    teste();
}

function D(){
    teste();
}

function E(){
    completo++;
    teste();
}

function F(){
    teste();
}

function G(){
    teste();
}

function H(){
    teste();
}

function I(){
    teste();
}

function teste(){
    completo++;

    if(completo==9){
        document.getElementById("geral").style.visibility = "hidden";
        document.getElementById("final").style.visibility = "visible";
    }
}

Another solution would be to take advantage of the JQuery used on your page and put the function that checks the variable "global" within the ready of the page, thus:

JQuery

var completo = 0;
$(document).ready(function(){

    $(":button").click(function() {
        completo++;
        $(this).hide();

        if(completo==9){
            $('div[id^="final"]').show();
            $('div[id^="geral"]').hide();
        }
    });
});

Using this second implementation you can hide the button that triggered the click event with this line: $(this).hide();