JavaScript开发餐厅小费计算器无法获取输入框数据如何解决

问题核心原因 #

你当前代码的问题是：bill_value和NumberOfPeople两个变量是在页面首次加载时就读取的输入框值，此时用户还没有输入内容，拿到的永远是初始默认的空值/0。后续用户输入完账单金额、用餐人数再点击小费比例按钮时，代码没有重新读取输入框的最新值，还是用的页面加载时的旧值，自然无法正常计算。

另外还存在几个可优化的问题：

• 输入框拿到的value是字符串类型，直接做乘法计算可能出现异常
• 点击多个小费比例按钮后，所有被点击过的按钮都会变成选中样式，没有清除其他按钮的选中状态
• 没有做非0校验，用餐人数为0时会出现除以0的报错

修复后的代码 #

修改后的JavaScript代码如下：

// 页面初始化时只缓存DOM元素，不提前读取value
const billInput = document.querySelector(".billJS");
const peopleInput = document.querySelector(".personJs");
const percentBtns = document.querySelectorAll(".percent-value");
const tipPerPersonEl = document.querySelector(".per-person");
const totalPerPersonEl = document.querySelector(".pere-person");

// 给所有比例按钮绑定点击事件，不用每个单独写
percentBtns.forEach(btn => {
  btn.onclick = function() {
    // 1. 先清除所有按钮的选中样式
    percentBtns.forEach(b => b.style.backgroundColor = "");
    // 2. 给当前点击的按钮加选中样式
    this.style.backgroundColor = "RGB(38,194,173)";
    // 3. 实时读取最新的输入值，转成数字类型
    const billValue = Number(billInput.value);
    const peopleCount = Number(peopleInput.value);
    // 4. 非0校验，避免报错
    if (billValue <= 0 || peopleCount <= 0) {
      tipPerPersonEl.innerHTML = "$0.00";
      totalPerPersonEl.innerHTML = "$0.00";
      return;
    }
    // 5. 获取当前按钮的小费比例
    let percent = 0;
    if (this.classList.contains("n5")) percent = 0.05;
    if (this.classList.contains("n10")) percent = 0.1;
    if (this.classList.contains("n15")) percent = 0.15;
    // 6. 计算结果赋值
    const tipPerPerson = (billValue * percent / peopleCount).toFixed(2);
    const totalPerPerson = (billValue * (1 + percent) / peopleCount).toFixed(2);
    tipPerPersonEl.innerHTML = "$" + tipPerPerson;
    totalPerPersonEl.innerHTML = "$" + totalPerPerson;
  }
})

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