Page reloading after click button

Question

I have a problem after pressing a button on my page, using Jquery.

After the click, a function should be done and then the result would be displayed on the screen, but I noticed that after clicking the button, the function is executed and the result shown however in fraction of seconds, and the page is reloaded then.

follows the HTML and JS referring to that part :

<div class="list-group" id='allResultBasal'>
        
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"  id='basalHomem'>
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">Homem</h5>
            <small><span id='subClassM'>Clique para entender</span></small>
          </div>
          <p class="mb-1">
              <br>
              Seu Consumo Calórico Basal é:<br>
              <small class="text-muted">Donec id elit non mi porta.</small>
              <span id='resultHomem'>   </span>
              
          </p>
          <small></small>
        </a>
       
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id='basalMulher'> 
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">Mulher</h5>
            <small class="text-muted"><span  id='subClassM'>Clique para entender</span></small>
          </div>
          <p class="mb-1"><br>Seu Consumo Calórico Basal é:<br></p>
          <small class="text-muted">Donec id elit non mi porta.</small>
        </a>
    </div>

the JS :

$("#botaoBasal").click(function(){
    var pesoB = $("#inputPassword3").val();
    var alturaB = $('#inputPassword2').val();
    var idadeB = $('#inputEmail3').val();    
    var generoB = $("input[name='gridRadios']:checked").val();
    var basal ='nothing';
    
    if (generoB == 'h'){

        var basal = 66.5 + (13.75 * pesoB) + (5 * alturaB ) - (6.8 * idadeB);
        //66,5 + (13,75 x Peso) + (5,0 x Altura em cm) – (6,8 x Idade).

        $('#basalHomem').css('visibility', 'visible');
        //$('#resultHomem').text(basal +'kcal/dia');
        

    }else if (generoB == 'm'){
        var basal = 665.1 + (9.56 * pesoB) + (1.8 * alturaB) - (4.7 * idadeB);
        // 665,1 + (9,56 x Peso) + (1,8 x Altura em cm) – (4,7 x Idade).

        $('#basalMulher').css('visibility', 'visible');
        //$('#resultMulher').text(basal +'kcal/dia');

    }
    console.log(basal);

   

});

Answer 1

The problem probably happens because you are using tags <a href="#"> on the button.

It is important to note that the HTML snippet you published does not include the button that activates its function, or if it contains it does not have the ID, and that makes the solution to follow just a guess.

The tag a html serves to direct the browser somewhere, and is dispensable if the button function is unique and exclusively run Javascript. Listener continues to function even when linked to a different element. Depending on your environment href="#" can be understood as "this page", and then it redirects to the same page, looking like a reload.

Two are the solutions, a correct and an easy:

The easy is to add the variable eventin your jQuery and then cancel it. It looks something like this:

// Aqui a gente passa a variável "event", que captura detalhes de onde foi dado o clique
    $("#botaoBasal").click(function( event ){
        
        // Seu código aqui
        
        // Agora cancelamos a execução padrão da tag, que é o redirecionamento, com o método preventDefault
        event.preventDefault();

    });

Now, the right solution would even be to remove your tag a completely, and allocate your Selector ID on the button itself:

<!-- language: lang-html -->

    <div class="minhas classes aqui" id="botaoBasal">
      Verificar Basal
    </div>

<!-- end snippet -->