Como chamar a mesma function mais de um button?

JavaScript

HTML5

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

Rodrigo

Curtidas 0

Respostas

Rodrigo

Rodrigo

12/05/2020

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.
GOSTEI 0
Emerson Nascimento

Emerson Nascimento

12/05/2020

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.
GOSTEI 0
POSTAR