JavaScript金额找零系统
换算的结果出现一秒就返回原来的样子了，想请教这个问题要咋解决呀T-T
题目是：基于Java Web利用JavaScript编写一个金额找零的系统，用输入框输入一个整数，表示找零的数量，数值为1~100。假如系统中有50、20，10、5，1 这5种面额的纸币，显示每种纸币应该找的数量。
代码如下：
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<script>
function calculate(){
var amount = document.getElementById('amount').value;
var denominations = [50,20,10,5,1];
var count = [];
for (var i = 0; i < denominations.length; i++) {
count[i] = Math.floor(amount / denominations[i]);
amount %= denominations[i];
}
var result = document.getElementById('result');
result.innerHTML = "<h2>金额找零结果</h2>";
for (var i = 0; i < denominations.length; i++) {
if (count[i] > 0) {
result.innerHTML += denominations[i] + "元：" + count[i] + "张<br>";
}
}
}
</script>
<h1>金额找零系统</h1>
<form>
请输入要找零的金额（1~100）:
<input type="text" id="amount">
<button onclick="calculate()">计算</button>
</form>
<div id="result"></div>
</body>
</html>
就是会从图1跳成图2，但是显示结果1秒就跳回图1了，不清楚是什么问题导致的
图1：
图2：
【以下回答由 GPT 生成】
这个问题很容易解决，你只需要在代码中添加一行代码即可。
你可以在最后的计算结果那一行，将结果赋值给一个HTML元素，例如一个<div>元素。这样，结果就会显示在页面上，并且不会一闪而过。
下面是修改后的代码示例：
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--<link rel="stylesheet" type="text/css" href="styles.css">-->
</head>
<body>
<script>
function calculate(){
var amount = document.getElementById('amount').value;
var denominations = [50, 20, 10, 5, 1];
var count = [];
for (var i = 0; i < denominations.length; i++) {
count[i] = Math.floor(amount / denominations[i]);
amount %= denominations[i];
}
var result = "50元：" + count[0] + "张，20元：" + count[1] + "张，10元：" + count[2] + "张，5元：" + count[3] + "张，1元：" + count[4] + "张";
document.getElementById('result').innerText = result;
}
</script>
<label>找零金额：</label>
<input type="text" id="amount">
<button onclick="calculate()">计算找零</button>
<div id="result"></div>
</body>
</html>
在上面的代码中，我添加了一个<div id="result"></div>元素，它将用于显示计算结果。在calculate函数中，我将计算得到的结果赋值给result变量，并通过innerText属性将结果显示在<div>元素中。
这样，你就可以在页面上看到计算结果了。希望这对你有帮助！
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
给button标签添加一个 type='button' 就可以了
如果该回答对你有帮助，请点击左下角的采纳按钮~
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<script>
function calculate(){
var amount = document.getElementById('amount').value;
var denominations = [50,20,10,5,1];
var count = [];
for (var i = 0; i < denominations.length; i++) {
count[i] = Math.floor(amount / denominations[i]);
amount %= denominations[i];
}
var result = document.getElementById('result');
result.innerHTML = "<h2>金额找零结果</h2>";
for (var i = 0; i < denominations.length; i++) {
if (count[i] > 0) {
result.innerHTML += denominations[i] + "元：" + count[i] + "张<br>";
}
}
}
</script>
<h1>金额找零系统</h1>
<form>
请输入要找零的金额（1~100）:
<input type="text" id="amount">
<button type='button' onclick="calculate()">计算</button>
</form>
<div id="result"></div>
</body>
</html>