Add +1 every time you click the button?

Question

Hello! My question is this: I would like that each time you click on the button, add one more to my badge, here is the code:

HTML: <button id="buttonAdd"type="button"></button>

HTML badge (where the change will be made):

<a href="pagamentos.html"><i class="fas fa-shopping-cart"></i><span class="badge badge-success" 
                id="carrinhoIndex">?</span></a>

JS:

var count = 0;
$('#buttonAdd').click(function(){
  alert(count);
  count++;
});

Apparently the code is right, but it doesn’t work. The version I’m using of bootstrap and javascript got on the bootstrap site, so I don’t know what the problem is (another javascript functionality works)

The Alert there is to check if the code is working, but it is not.

I tried using the function: HTML: onclick="Acrescentar()";

var cont=0; 
function Acrescentar() { 
$("#carrinhoIndex").text(cont); 
cont++;; 
}

And it worked, but it doesn’t add up to +1 every time you click.

Jquery, Bootstrap and Javascript version:

JQUERY:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

BOOTSTRAP:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  

JAVASCRIPT:

<script src="js/js.js"></script>

Answer 1

Your logic is correct. As you didn’t list the add function, I decided to create one based on the code you posted. Follows a functional version of the counter.

$(document).ready(function(){
  carrinhoIndex.innerHTML = 0
})

var count = 0;

function acrescentar() { 
  count++;
  carrinhoIndex.innerHTML = count
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<button id="buttonAdd" type="button" onclick="acrescentar()">Acrescentar</button>

<a href="pagamentos.html">
  <i class="fas fa-shopping-cart"></i>
  <span class="badge badge-success" id="carrinhoIndex">?</span>
</a>

Answer 2

Via jQuery: https://jsfiddle.net/jxved9o6/

$(document).ready(function() {
  var count = 0;
  var badge = $('#carrinhoIndex');
  badge.text(count);
  $(document).on('click', '#buttonAdd', function(e){
    e.preventDefault;
    count++;
    badge.text(count)
    });
}) 
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/1.2.1/knockout-min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<button class="btn btn-primary" id="buttonAdd"type="button">ADICIONAR</button>
    <a href="pagamentos.html">
    <i class="fas fa-shopping-cart"></i>
    <span class="badge badge-success" id="carrinhoIndex">?</span></a>

Answer 3

Your code is right but you’re not updating the value visually, you’re only updating the value of the variable but you’re not showing the same updated value. After the addition of the variable. Try after the acrescimo: $("YOUR BADGE"). html(cont);