如何修复该JavaScript函数？行驶油耗计算功能按钮点击无响应问题

嘿，我帮你找出代码里的几个问题啦，这就是点击提交按钮没反应的原因：

• DOM元素ID不匹配：你的距离输入框id是dist，但JS里写的是document.getElementById("distance")——根本找不到这个元素，后续的计算逻辑自然没法正常启动。
• 结果元素引用错误：你把计算出来的数值存在了变量res里，然后直接调用res.innerText——数字类型哪有这个属性呀！得先获取页面上id为res的<p>元素，再给它的innerText赋值才行。
• onload事件绑定错地方了：<main>标签不支持onload事件哦，这个事件得绑定在window或者<body>标签上，或者干脆把脚本放在页面底部，确保DOM加载完成后再执行绑定操作。

给你修正后的完整代码，直接用就行：

<!DOCTYPE html>
<html>
<body onload="load();">
<main>
  <h2>Calculate how much gas you need</h2>
  <input type="number" class="number" id="dist"><br/>
  <input type="number" class="number" id="cons"><br/><br/>
  <input type="button" class="button" id="button" value="Submit"><br/>
  <p id="res"></p>
</main>

<script>
function calc() {
  // 修正输入框ID匹配问题
  var dist = document.getElementById("dist").value;
  var cons = document.getElementById("cons").value;
  // 转成数字类型，避免字符串拼接导致的计算错误
  var res = Number(dist) / 100 * Number(cons);
  // 获取结果展示的p元素再赋值
  var resultElement = document.getElementById("res");
  resultElement.innerText = "You need " + res + " liters of gas.";
}

function load() {
  var button = document.getElementById("button");
  button.addEventListener("click", calc, false);
}
</script>
</body>
</html>

另外提个小建议：记得把输入值转成数字类型（用Number()），不然如果用户输入后，dist和cons会是字符串类型，可能出现奇怪的计算结果（比如变成字符串拼接而非数值运算）。

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