求调试：小球下落弹跳总距离计算的JavaScript代码问题

计算公式说明 #

要计算小球从初始高度自由下落、弹跳指定次数后的总距离，核心逻辑如下：

• 初始下落距离为设定的初始高度
• 每次弹跳包含上升和下落两段，总距离为2倍当前弹跳高度
• 弹跳高度是前一次高度乘以弹跳比例，形成等比数列

当小球落地8次（对应弹跳7次）时，总距离公式为：

distance = 1 + 2 * (h + h^2 + ... + h^7)

注：公式中h^n表示第n次弹跳的高度（初始高度×弹跳比例的n次方）；括号内为所有弹跳高度的等比数列求和，乘以2是因为每次弹跳包含往返两段。

示例计算 #

以初始高度1米、弹跳比例2/3、弹跳7次为例：

distance = 1 + 2 * (2/3 + (2/3)^2 + (2/3)^3 + (2/3)^4 + (2/3)^5 + (2/3)^6 + (2/3)^7)
distance = 1 + 2 * (2/3 * (10423/2187)) = 1 + 2 * (6882/2187) = 10423/2187 ≈ 4.77 m

问题代码 #

以下是编写的无法正常运行的JavaScript和HTML代码：

JavaScript代码 #

function totalDistance(fall, bouncing, numBounces) {
  let distance = fall;
  let h = bouncing;
  for (let i = 1; i <= numBounces - 1; i++) {
    distance += 2 * Math.pow(h, i);
  }
  return distance;
}

function calculate() {
  let fall = document.getElementById("fall").value;
  let bouncing = document.getElementById("bouncing").value;
  let numBounces = document.getElementById("numBounces").value;
  document.getElementById("result").innerHTML = "The total distance traveled after " + numBounces + " bounces is: " + totalDistance(fall, bouncing, numBounces) + " meters";
}

HTML代码 #

<!DOCTYPE html>
<html>

<body>

  <p>Enter the height of the fall (in meters): <input type="text" id="fall"></p>
  <p>Enter the bouncing ratio (e.g. 0.66 for 2/3): <input type="text" id="bouncing"></p>
  <p>Enter the number of bounces: <input type="text" id="numBounces"></p>
  <button onclick="calculate()">Calculate</button>
  <p id="result"></p>

</body>

</html>

代码问题分析与修复 #

存在的问题 #

1. 类型错误：输入框获取的是字符串类型，直接参与计算会导致字符串拼接而非数值运算
2. 循环逻辑错误：循环次数少一次，未覆盖所有弹跳次数的高度计算
3. 高度计算错误：直接使用弹跳比例的幂次，忽略初始高度的乘数，导致弹跳高度完全错误
4. 无输入验证：未处理非法输入（如负数、非数值等）

修复后的代码 #

JavaScript代码

function totalDistance(fall, bouncing, numBounces) {
  if (numBounces === 0) {
    return fall;
  }
  let distance = fall;
  let currentHeight = fall * bouncing;
  for (let i = 1; i <= numBounces; i++) {
    distance += 2 * currentHeight;
    currentHeight *= bouncing;
  }
  return distance;
}

function calculate() {
  const fall = parseFloat(document.getElementById("fall").value);
  const bouncing = parseFloat(document.getElementById("bouncing").value);
  const numBounces = parseInt(document.getElementById("numBounces").value);

  if (isNaN(fall) || fall <= 0) {
    document.getElementById("result").textContent = "请输入有效的下落高度（正数）";
    return;
  }
  if (isNaN(bouncing) || bouncing <= 0 || bouncing >= 1) {
    document.getElementById("result").textContent = "请输入有效的弹跳比例（0到1之间的正数）";
    return;
  }
  if (isNaN(numBounces) || numBounces < 0 || !Number.isInteger(numBounces)) {
    document.getElementById("result").textContent = "请输入有效的弹跳次数（非负整数）";
    return;
  }

  const total = totalDistance(fall, bouncing, numBounces);
  document.getElementById("result").textContent = `弹跳${numBounces}次后，小球总运动距离为：${total.toFixed(2)} 米`;
}

HTML代码（优化中文提示）

<!DOCTYPE html>
<html>

<body>
  <p>输入初始下落高度（米）：<input type="text" id="fall"></p>
  <p>输入弹跳比例（例如2/3对应0.66）：<input type="text" id="bouncing"></p>
  <p>输入弹跳次数：<input type="text" id="numBounces"></p>
  <button onclick="calculate()">计算</button>
  <p id="result"></p>
</body>

</html>

验证 #

用示例参数（初始高度1米、弹跳比例0.6667、弹跳7次）测试，修复后的代码会输出≈4.77米的正确结果。

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