为range输入框绑定onchange事件实现动态效果

你的代码存在几个关键问题导致无法实现动态更新：

1. updateRate 函数嵌套在 compute 函数内部，全局作用域无法访问到它，没法绑定到输入框的事件上。
2. range 输入框没有绑定触发更新的事件，且存在无效属性（default 不是合法属性）。
3. 利率显示元素 rate_val 未闭合，初始值也未正确关联。

以下是修正后的完整实现方案：

方案一：内联事件绑定（简单直观） #

修正后的 JavaScript 代码 #

// 将updateRate放在全局作用域，确保事件能调用到
function updateRate() {
  const rateVal = document.getElementById("rate").value;
  document.getElementById("rate_val").textContent = rateVal + "%";
}

// 页面加载时初始化显示初始值
window.onload = () => updateRate();

修正后的 HTML 代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>Simple Interest Calculator</title>
</head>
<body>
  <div class="container">
    <h1>Simple Interest Calculator</h1>
    <form id="form1">
      <label for="rate">Interest Rate</label>
      <!-- 绑定oninput实现滑动时实时更新，用onchange则是松开滑块后更新 -->
      <input type="range" id="rate" min="1" max="20" step="0.25" value="10.25" oninput="updateRate()">
      <span id="rate_val"></span>
      <br><br>
    </form>
  </div>
</body>
</html>

方案二：事件监听绑定（模块化推荐） #

这种方式不需要全局函数，代码更整洁：

JavaScript 代码 #

window.onload = () => {
  const rateInput = document.getElementById("rate");
  const rateDisplay = document.getElementById("rate_val");

  // 初始化显示初始值
  rateDisplay.textContent = rateInput.value + "%";

  // 绑定滑动事件
  rateInput.addEventListener("input", function() {
    rateDisplay.textContent = this.value + "%";
  });
};

HTML 代码（只需移除内联事件） #

<!DOCTYPE html>
<html>
<head>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>Simple Interest Calculator</title>
</head>
<body>
  <div class="container">
    <h1>Simple Interest Calculator</h1>
    <form id="form1">
      <label for="rate">Interest Rate</label>
      <input type="range" id="rate" min="1" max="20" step="0.25" value="10.25">
      <span id="rate_val"></span>
      <br><br>
    </form>
  </div>
</body>
</html>

关键改动说明 #

• 把嵌套在compute里的updateRate移到全局作用域，或改用事件监听避免全局函数。
• 用oninput事件实现滑动时实时更新，若需要松开滑块再更新，替换为onchange即可。
• 移除无效的default属性，保留value设置初始利率。
• 闭合rate_val标签，通过页面加载事件初始化显示，避免初始空白。
• 给显示值加上%，保持格式统一。

内容的提问来源于stack exchange，提问作者That Lady