如何修改JavaScript代码实现点击计算按钮后更新计算结果

问题说明 #

我设置了4项计算逻辑，输入1-100的整数时会输出对应结果。目前输入过程中数值会自动更新，但我希望点击Calculate按钮后才触发计算并更新结果，不知道代码哪里出错或遗漏了。

问题根源 #

1. 代码中给输入框绑定了input事件监听，只要输入框内容变化就会调用adjustData函数，导致实时更新。
2. 按钮的onclick调用adjustData()时没有传入输入值，原函数需要接收参数才能正常计算。
3. 表单默认的提交行为会刷新页面，点击按钮后计算结果会瞬间消失。

修改方案 #

步骤1：移除实时触发的事件监听 #

删掉输入框的input事件绑定，取消输入时自动计算的逻辑。

步骤2：处理表单提交逻辑 #

监听表单的submit事件，用preventDefault()阻止页面刷新，同时触发计算函数。

步骤3：完善输入验证 #

在计算函数中加入合法性校验，确保用户输入的是1-100之间的整数，提升交互体验。

修改后的代码 #

JavaScript代码 #

let phoneOutput = document.getElementById("rc-phone");
let carOutput = document.getElementById("rc-car");
let trashOutput = document.getElementById("rc-trash");
let monthlyCost = document.getElementById("monthly-cost");
let input = document.getElementById("customPercent");

const adjustData = () => {
  // 获取输入值并转换为数字
  const numberConvert = Number(input.value);
  
  // 验证输入是否为1-100的整数
  if (isNaN(numberConvert) || numberConvert < 1 || numberConvert > 100 || !Number.isInteger(numberConvert)) {
    alert("请输入1-100之间的整数");
    return;
  }
  
  const decimal = numberConvert / 100;
  const monthlyCostFormula = (8000 * decimal) * (.026 / 12);
  const trashBagFormula = 243 * decimal;
  const milesDrivenFormula = 14294 * decimal;
  const phonesChargedFormula = 368949 * decimal;
  
  monthlyCost.innerHTML = monthlyCostFormula.toFixed(2);
  trashOutput.innerHTML = Math.round(trashBagFormula);
  carOutput.innerHTML = Math.round(milesDrivenFormula);
  phoneOutput.innerHTML = Math.round(phonesChargedFormula);
}

// 监听表单提交，阻止页面刷新并触发计算
document.querySelector("form").addEventListener("submit", (e) => {
  e.preventDefault();
  adjustData();
});

HTML代码 #

<form method="post">
  <input id="customPercent" type="text" placeholder="请输入1-100的整数" />
  <button type="submit" id="submit">Calculate</button>
</form>
<div>
  <h6>相当于减少</h6>
  <span style="font-size: 28px; font-weight: bold; font-family: sans-serif;" id="rc-trash">100</span><br>
  <span class="green-text small-txt">袋生活垃圾排放</span>
</div>
<div>    
  <h6>相当于抵消</h6>
  <span style="font-size: 28px; font-weight: bold; font-family: sans-serif;" id="rc-car">20</span><br>
  <span class="green-text small-txt">燃油车行驶里程（英里）</span>
</div>
<div>
  <h6>相当于抵消</h6>
  <span style="font-size: 28px; font-weight: bold; font-family: sans-serif;" id="rc-phone">500</span><br>
  <span class="green-text small-txt">智能手机充电次数</span>
</div>
<div>
  <h4 class="heading-4">预估月成本 <a href="#" data-toggle="tooltip" title="这里会有详细说明"><i class="fa fa-info-circle gray"></i></a></h4>
  <span style="font-size: 28px; font-weight: bold; font-family: sans-serif;">$<span id="monthly-cost">15.00</span></span>
  <h5>每月</h5>   
</div>

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