I’m making an Alert after 3 clicks and stop the next clicks, but when I uncheck some that was marked Alert still appears

Question

In short, I have 10 buttons and I want to choose only 3, if you try to click 4° button appears an Alert stating that exceeded the selected limit "So far so good, my code is working", but if I want to uncheck a selected button to mark another, Alert still works and shouldn’t, here is my error in the code. Can someone help me? Note: here the snippet is not working, my host is, I don’t know why, maybe I didn’t know how to set up.

function changeClass(clicked_id) {
  itemIndex = $("#div-megasena button.active-mega").length;
  if (itemIndex < 2) {
    classe = document.getElementById(clicked_id).className;
    if (classe == 'btn btn-outline-success') {
      document.getElementById(clicked_id).className = 'btn btn-success active-mega';
    } else {
      document.getElementById(clicked_id).className = 'btn btn-outline-success';
    }
  } else {
    document.getElementById(clicked_id).className = 'btn btn-outline-success teste';
    alert('Limite de numeros selecionados atingidos');
  }
};

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

<button onclick="changeClass(this.id)" id="01" type="button" class="btn btn-outline-success">01</button>
<button onclick="changeClass(this.id)" id="02" type="button" class="btn btn-outline-success">02</button>
<button onclick="changeClass(this.id)" id="03" type="button" class="btn btn-outline-success">03</button>
<button onclick="changeClass(this.id)" id="04" type="button" class="btn btn-outline-success">04</button>
<button onclick="changeClass(this.id)" id="05" type="button" class="btn btn-outline-success">05</button>
<button onclick="changeClass(this.id)" id="06" type="button" class="btn btn-outline-success">06</button>
<button onclick="changeClass(this.id)" id="07" type="button" class="btn btn-outline-success">07</button>
<button onclick="changeClass(this.id)" id="08" type="button" class="btn btn-outline-success">08</button>
<button onclick="changeClass(this.id)" id="09" type="button" class="btn btn-outline-success">09</button>
<button onclick="changeClass(this.id)" id="10" type="button" class="btn btn-outline-success">10</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script

Answer 1

It can even be done using Alert but the final visual result is not good because the bootstrap button has some peculiarities:

• In device whose interaction with the screen is controlled by mouse, the process of transition animation and change of states is only concluded to the mouse pointer leaving the element. An Alert trigger, during this state transition, causes a Glitch (in my view unavoidable) where the state transition of the button at the moment one that Alert is displayed is stopped, causing the button to be displayed as selected even if it is not selected. Glitch corrects itself when closing Alert and passing the mouse pointer over the element.
• In a device whose screen is touchscreen, the process of transition animation and state exchange is chronologically concluded. An Alert trigger, during this state transition, causes a Glitch (in my view unavoidable) that will interrupt and display the button as selected even if it is not selected. Glitch corrects itself when closing Alert and clicking another button.
• On devices whose screen interaction is controlled by keyboard the process goes smoothly. Navigate between buttons with the key TAB and use button of SPACE to select or unselect the buttons.

function changeClass(e) {
  if ($(".active-mega").length >= 3 &&
    $(e.target).hasClass("btn-outline-success")) {
    alert("Apenas três números podem ser selecionados.");
  } else {
    $(e.target).toggleClass("btn-outline-success btn-success active-mega");
  }
};

$(".btn").each(function(e) {
  this.addEventListener("click", changeClass);
});

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

<button id="01" type="button" class="btn btn-outline-success">01</button>
<button id="02" type="button" class="btn btn-outline-success">02</button>
<button id="03" type="button" class="btn btn-outline-success">03</button>
<button id="04" type="button" class="btn btn-outline-success">04</button>
<button id="05" type="button" class="btn btn-outline-success">05</button>
<button id="06" type="button" class="btn btn-outline-success">06</button>
<button id="07" type="button" class="btn btn-outline-success">07</button>
<button id="08" type="button" class="btn btn-outline-success">08</button>
<button id="09" type="button" class="btn btn-outline-success">09</button>
<button id="10" type="button" class="btn btn-outline-success">10</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

An alternative to bypassing these glitches would be to abandon the alert() and use the console to display a message.

function changeClass(e) {
  if ($(".active-mega").length >= 3 &&
    $(e.target).hasClass("btn-outline-success")) {
    console.log("Apenas três números podem ser selecionados.");
  } else {
    $(e.target).toggleClass("btn-outline-success btn-success active-mega");
  }
};

$(".btn").each(function(e) {
  this.addEventListener("click", changeClass);
});

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

<button id="01" type="button" class="btn btn-outline-success">01</button>
<button id="02" type="button" class="btn btn-outline-success">02</button>
<button id="03" type="button" class="btn btn-outline-success">03</button>
<button id="04" type="button" class="btn btn-outline-success">04</button>
<button id="05" type="button" class="btn btn-outline-success">05</button>
<button id="06" type="button" class="btn btn-outline-success">06</button>
<button id="07" type="button" class="btn btn-outline-success">07</button>
<button id="08" type="button" class="btn btn-outline-success">08</button>
<button id="09" type="button" class="btn btn-outline-success">09</button>
<button id="10" type="button" class="btn btn-outline-success">10</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Another alternative would be to abandon the alert() and use a modal bootstrap:

function changeClass(e) {
  if ($(".active-mega").length >= 3 &&
    $(e.target).hasClass("btn-outline-success")) {
    $("#exampleModal").modal('show');
  } else {
    $(e.target).toggleClass("btn-outline-success btn-success active-mega");
  }
};

$(".btn").each(function(e) {
  this.addEventListener("click", changeClass);
});

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

<button id="01" type="button" class="btn btn-outline-success">01</button>
<button id="02" type="button" class="btn btn-outline-success">02</button>
<button id="03" type="button" class="btn btn-outline-success">03</button>
<button id="04" type="button" class="btn btn-outline-success">04</button>
<button id="05" type="button" class="btn btn-outline-success">05</button>
<button id="06" type="button" class="btn btn-outline-success">06</button>
<button id="07" type="button" class="btn btn-outline-success">07</button>
<button id="08" type="button" class="btn btn-outline-success">08</button>
<button id="09" type="button" class="btn btn-outline-success">09</button>
<button id="10" type="button" class="btn btn-outline-success">10</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Alerta!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Apenas três números podem ser selecionados.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Answer 2

I couldn’t get your code to work here... but I made some changes to your code, I started using jQuery and Events

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <title>Document</title>

</head>

<body>

    <button data-id="01" type="button" class="btn btn-outline-success">01</button>
    <button data-id="02" type="button" class="btn btn-outline-success">02</button>
    <button data-id="03" type="button" class="btn btn-outline-success">03</button>
    <button data-id="04" type="button" class="btn btn-outline-success">04</button>
    <button data-id="05" type="button" class="btn btn-outline-success">05</button>
    <button data-id="06" type="button" class="btn btn-outline-success">06</button>
    <button data-id="07" type="button" class="btn btn-outline-success">07</button>
    <button data-id="08" type="button" class="btn btn-outline-success">08</button>
    <button data-id="09" type="button" class="btn btn-outline-success">09</button>
    <button data-id="10" type="button" class="btn btn-outline-success">10</button>
</body>
<script>
    /* CONT BTNS SELECIONADOS */
    var wContMaxButtons = 0;
    /* EVENT MOUSEUP BUTTONS */
    $("button").on("mouseup", function () {
        var wClass = $(this).attr("class");
        var wIdBtn = $(this).attr("data-id");
        
        if (wClass == 'btn btn-outline-success') {
            if (wContMaxButtons == 5) {
                alert('Limite de numeros selecionados atingidos :(');
                return;
            }
            console.log("ID = " + wIdBtn)
            $(this).attr("class", "btn btn-success active-mega");
            /* INCREMENTA CONT */
            wContMaxButtons++;
        } else {
            console.log("ID = " + wIdBtn)
            $(this).attr("class", "btn btn-outline-success");
            /* DECREMENTA CONT */
            wContMaxButtons--;
        }

    });
</script>

</html>