JavaScript中点击按钮后如何在外部函数正确访问全局变量tip？

声明全局变量tip，希望通过点击不同按钮（按钮文本为5%、10%等）将其赋值为对应数字，在percentage函数内部能获取到正确的tip值，但在外部（如calc函数）调用时显示NaN。需要实现点击按钮后，calc函数能使用正确的tip值进行计算。

原代码：

let tip = 0;
const billInput = document.querySelector(".bill__input");
const peopleInput = document.querySelector(".people__input");

const individualTip = document.querySelector(".conclusion__tip-person");
const individualTotal = document.querySelector(".conclusion__total-person");

const reset = document.querySelector(".conclusion__reset");
const buttons = document.querySelectorAll(".select-tip__button");

function percentage() {
  tip = parseInt(this.innerText);
}
buttons.forEach((button) => {
  button.addEventListener("click", percentage);
});

function calc() {
  if (billInput !== "" && peopleInput === "") {
  }
  individualTip.textContent = (billInput.value / 100) * tip;

  individualTotal.textContent =
    "$" + (billInput.value / peopleInput.value).toFixed(2);
}

document.addEventListener("input", calc);

核心代码：

let tip = 0;
function percentage() {
  tip = parseInt(this.innerText);
}
buttons.forEach((button) => {
  button.addEventListener("click", percentage);
});

问题原因 #

1. parseInt(this.innerText)处理带百分号的文本时，虽能取到整数，但无法兼容小数百分比（如15.5%），且若文本格式异常易返回NaN
2. calc函数中错误判断DOM元素本身而非输入框的value属性，导致逻辑失效
3. 输入框值为字符串类型，直接参与运算可能引发非预期的NaN

修复步骤 #

• 优化数值解析：用replace('%', '')移除百分号后转数字，兼容整数和小数百分比
• 修正条件判断：检查输入框的value属性而非DOM元素
• 强制类型转换：将输入值转为数字，避免字符串运算问题
• 添加边界处理：防止人数为0时的除法错误

修正后的完整代码 #

let tip = 0;
const billInput = document.querySelector(".bill__input");
const peopleInput = document.querySelector(".people__input");
const individualTip = document.querySelector(".conclusion__tip-person");
const individualTotal = document.querySelector(".conclusion__total-person");
const reset = document.querySelector(".conclusion__reset");
const buttons = document.querySelectorAll(".select-tip__button");

function percentage() {
  // 移除百分号后转为数字，兼容整数和小数百分比
  tip = Number(this.innerText.replace('%', ''));
}
buttons.forEach((button) => {
  button.addEventListener("click", percentage);
});

function calc() {
  const bill = Number(billInput.value) || 0;
  const peopleCount = Number(peopleInput.value) || 1;
  
  // 计算单人小费和总费用，处理边界情况
  const perPersonTip = (bill / 100) * tip;
  const perPersonTotal = (bill + perPersonTip * peopleCount) / peopleCount;

  individualTip.textContent = `$${perPersonTip.toFixed(2)}`;
  individualTotal.textContent = `$${perPersonTotal.toFixed(2)}`;
}

document.addEventListener("input", calc);

// 可选：添加重置按钮功能
reset.addEventListener("click", () => {
  tip = 0;
  billInput.value = "";
  peopleInput.value = "";
  individualTip.textContent = "$0.00";
  individualTotal.textContent = "$0.00";
});

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