Como chamar a mesma function mais de um button?

12/05/2020

7

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 😃
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
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

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar