Javascript 功能重新加载页面

Question

我想通过 flask 和 javascript 创建一个网络应用程序。我有一个 javascript 相关领域的问题。我有这两个功能：

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";
}

这两个功能都是通过按钮标签激活的，像这样

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

话虽如此，我不明白为什么在计算 BMI 时，页面会重新加载并添加一个 ?到超链接，所以我看不到结果。水功能没有发生，它可以正常工作。如果我犯了一些我不知道的愚蠢错误，我无法理解。如果可以，请帮助我

Answer 1

我用你的函数创建了工作代码。你可以调查一下。没有页面重新加载。如果您的代码重新加载，则可能是其他原因，您应该仔细检查。您可能有一个表单标签，它也可能会重新加载您的页面。

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>

Javascript 功能重新加载页面

Javascript function realoding page

javascript

function

hyperlink

flask