[FIXED] Javascript function realoding page

Issue

I wat to create a webapp via flask and javascript. I have a question in the javascript related field. I have this two function:

function calculateBMI(){
    let height = document.getElementById("bmiHeight").value;
    let weight = document.getElementById("bmiWeight").value;

    let bmi = parseFloat(weight) / (parseFloat(height) * parseFloat(height));

    let result = document.getElementById("bmiResult");

    result.innerText = "Your BMI is:" + bmi;
}

function calculateWater(){
    let weight = document.getElementById("waterWeight").value;
    let result = document.getElementById("waterResult");
    result.innerText = "Your water requirement is: " + parseInt(weight)*30 + "ml";
}

This functions are both actived by a button tag, like this

<button value = calculate onclick="calculateBMI()">Calculate</button>
<button value = calculate onclick="calculateWater()">Calculate</button>

With that said, I can't understand why when I calculate BMI, the pages reload and add an ? to the hyperlink, so I can't see the resoult. It doesn't happend whit the water function, that works properly. I can't understant if I made some stupid error, that I don't know. If you can,m please help me

Solution

I used your functions to create the working code. You can investigate it. There is no page reload. If your code reloads it might be something else, you should check it carefully. You might have a form tag and it also might reload your page.

function calculateBMI(){
    let height = document.getElementById("bmiHeight").value;
    let weight = document.getElementById("bmiWeight").value;

    let bmi = parseFloat(weight) / (parseFloat(height) * parseFloat(height));

    let result = document.getElementById("bmiResult");

    result.innerText = "Your BMI is:" + bmi;
}
function calculateWater(){
    let weight = document.getElementById("waterWeight").value;
    let result = document.getElementById("waterResult");
    result.innerText = "Your water requirement is: " + parseInt(weight)*30 + "ml";
}

<label for="bmiHeight">BMI Height</label><input id="bmiHeight">
<label for="bmiWeight">BMI Weight</label><input id="bmiWeight">
<br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<h2 id="bmiResult"></h2>
<br>

<label for="waterWeight">Water weight</label><input id="waterWeight">
<br>
<button value = calculate onclick="calculateWater()">Calculate</button>
<h2 id="waterResult"></h2>

Answered By - Dmitrii