Como chamar a mesma function mais de um button?

12/05/2020

Ol� pessoal, sou novo aqui ent�o desculpe qualquer equivoco durante essa duvida.

Tenho uma p�gina de HTML que tem um bot�o de like em diferentes imagens (p�gina fict�cia para fins de aprendizagem).
Nessa p�gina criei um uma function para add os likes em uma imagem, funcionou perfeitamente na primeira imagem, mas quando chamo a fun��o no pr�ximo bot�o de like ela n�o funciona mais em nenhum dos bot�es.

var quantLike = 0;

function addLike() {
    quantLike = quantLike + 1;
    if(quantLike == 1) {
        bot�o.innerHTML = quantLike + " Like";
    }
    if(quantLike !== 1) {
        bot�o.innerHTML = quantLike + " Likes"
    }
}

Todos os bot�es tem a mesma estrutura.

<button id="bot�o" onclick="addLike()" class="btn btn-outline-danger">Like</button>

Tenho quase certeza que o problema est� no id, por�m n�o sei como proceder para que funcione em outros bot�es.

Algu�m consegue me ajudar?
Obrigado pela aten��o 😃

Rodrigo

Curtir t�pico + 0

Responder

Posts

12/05/2020

Rodrigo

Uma solu��o provis�ria que pensei foi criar uma fun��o diferente para cada bot�o:

var quantLike = 0;
var quantLike2 = 0;
var quantLike3 = 0;

function addLike() {
    quantLike = quantLike + 1;
    if(quantLike == 1) {
        bot�o.innerHTML = quantLike + " Like";
    }
    if(quantLike !== 1) {
        bot�o.innerHTML = quantLike + " Likes"
    }
} 

function addLike2() {
    quantLike2 = quantLike2 + 1;
    if(quantLike2 == 1) {
        bot�o2.innerHTML = quantLike2 + " Like";
    }
    if(quantLike2 !== 1) {
        bot�o2.innerHTML = quantLike2 + " Likes"
    }
} 

function addLike3() {
    quantLike3 = quantLike3 + 1;
    if(quantLike3 == 1) {
        bot�o3.innerHTML = quantLike3 + " Like";
    }
    if(quantLike3 !== 1) {
        bot�o3.innerHTML = quantLike3 + " Likes"
    }
}

E no HTML eu declarei cada fun��o com um 'id' diferente e chamo uma fun��o diferente em cada bot�o, por�m as fun��es fazem a mesma coisa:

<button id="bot�o" onclick="addLike()" class="btn btn-outline-danger">Like </button>

<button id="bot�o2" onclick="addLike2()" class="btn btn-outline-danger">Like </button>

<button id="bot�o3" onclick="addLike3()" class="btn btn-outline-danger">Like </button>

Sei que essa n�o � a melhor solu��o e gostaria de entender qual � a melhor maneira de proceder.

Responder

Gostei + 0

12/05/2020

Emerson Nascimento

voc� precisa de um contator para cada imagem?
veja se algo assim funciona:

function addLike( opcao ) {
    if (opcao == 1) {
        quantLike = quantLike + 1;
        if(quantLike == 1) {
            bot�o.innerHTML = quantLike + " Like";
        }
        else {
            bot�o.innerHTML = quantLike + " Likes";
        }
    } 
 
    if (opcao == 2) {
        quantLike2 = quantLike2 + 1;
        if(quantLike2 == 1) {
            bot�o2.innerHTML = quantLike2 + " Like";
        }
        else {
            bot�o2.innerHTML = quantLike2 + " Likes";
        }
    } 

    if (opcao == 3) {
        quantLike3 = quantLike3 + 1;
        if(quantLike3 == 1) {
            bot�o3.innerHTML = quantLike3 + " Like";
        }
        else {
            bot�o3.innerHTML = quantLike3 + " Likes";
        }
    } 
}

<button id="bot�o" onclick="addLike(1)" class="btn btn-outline-danger">Like </button>
<button id="bot�o2" onclick="addLike(2)" class="btn btn-outline-danger">Like </button>
<button id="bot�o3" onclick="addLike(3)" class="btn btn-outline-danger">Like </button>

ou assim:

function addLike( botsel, opcao ) {
    qtdlikes = 0;
    // determina qual vari�vel dever� ser incrementada
    if (opcao == 1) {
        quantLike = quantLike + 1;
        qtdlikes = quantLike;
    } 
    else if (opcao == 2) {
        quantLike2 = quantLike2 + 1;
        qtdlikes = quantLike2;
    } 
    else {
        quantLike3 = quantLike3 + 1;
        qtdlikes = quantLike3;
    } 

    // manipula o texto no bot�o correto
    if(qtdlikes == 1) {
            botsel.innerHTML = qtdlikes + " Like";
        }
    else {
            botsel.innerHTML = qtdlikes + " Likes";
        }
}

<button id="bot�o" onclick="addLike(bot�o, 1)" class="btn btn-outline-danger">Like </button>
<button id="bot�o2" onclick="addLike(bot�o2, 2)" class="btn btn-outline-danger">Like </button>
<button id="bot�o3" onclick="addLike(bot�o3, 3)" class="btn btn-outline-danger">Like </button>

n�o conhe�o JavaScript, mas acredito que isso pode te dar uma dire��o do que fazer.

Responder

Gostei + 0