我有一个简单的HTML，存储在hr.html
<html>
<head>
<title>Heart rate</title>
</head>
<body>
<form>
<label for="age">Age: </label>
<input type="text" id="age" name="age"><br><br>
<label for="restHR">Resting HR: </label>
<input type="text" id="restHR" name="restHR"><br><br>
<input type="submit" value="Submit" onclick="printResult()">
</form>
<div id='output'></div>
<script>
const calTargetHR = (age, restHR) => {
let targetHR = (((220 - age) - restHR)) + restHR;
return targetHR
}
const printResult = () => {
document.getElementById("output").innerHTML = calTargetHR(
document.getElementById('age').value,
document.getElementById('restHR').value
)
}
</script>
</body>
</html>
我通过双击文件来运行它。在地址栏中显示为:
file:///C:/Users/work/hr.html?age=&restHR=
问题是,如果我输入一些值,按下submit按钮,不显示结果,因为道路变成了:
file:///C:/Users/c21127478/CM6612%20Web/topic3/work/hr.html?age=3&restHR=4
如何解决这个问题?
可以将return false添加到onClick语句的末尾。这可以防止表单的默认HTML5行为:W3C按钮元素
<input type="submit" value="Submit" onclick="printResult();return false">