如何在JavaScript函数间传递数值？小费计算器报错求助

问题描述 #

编写课程用的小费计算器，要求实现3个依次依赖的函数：第二个函数使用第一个函数的计算结果，第三个函数使用第二个函数的计算结果。当前代码运行时，尝试将tipAmount与billAmount相加时，出现tipAmount is not defined的错误。

错误原因 #

tipAmount是getTipAmount函数内部用let声明的变量，作用域仅限于该函数内部，外部函数getBillTotal无法直接访问这个变量，因此会抛出未定义的错误。

解决方法 #

让每个函数返回计算结果，调用时将前一个函数的返回值作为参数传递给下一个函数，实现函数间的依赖传递：

• 修改getTipAmount，让它返回计算后的小费金额
• 调用getBillTotal时，传入getTipAmount的返回值
• 后续的amountPerPerson函数同理，接收前一个函数的结果作为参数

修正后的代码 #

// Grab the HTML Elements you want to work with
const billTotal = document.querySelector("#billTotal");
const tipPercent = document.querySelector("#tipPercent");
const noPeople = document.querySelector("#noPeople");
const calcTip = document.querySelector("#calcTip");
const resultsDiv = document.querySelector("#resultsDiv");


// Add event Listeners for your elements
calcTip.addEventListener("click", function() {
  const tipAmount = getTipAmount();
  const totalBill = getBillTotal(tipAmount);
  const perPerson = amountPerPerson(totalBill);
  // 将结果展示到页面
  resultsDiv.textContent = `小费：$${tipAmount}，总账单：$${totalBill}，每人分摊：$${perPerson}`;
});

// Declare any functions you will need 

function getTipAmount() {
  let total = Number(billTotal.value);
  let tip = Number(tipPercent.value);
  let output = total * (tip / 100);
  return output.toFixed(2);
}

function getBillTotal(tipAmount) {
  let billAmount = Number(billTotal.value);
  // toFixed返回字符串，转成数字再计算避免字符串拼接
  let billTotalur = Number(tipAmount) + billAmount;
  return billTotalur.toFixed(2);
}

function amountPerPerson(totalBill) {
  let peopleCount = Number(noPeople.value);
  let perPerson = Number(totalBill) / peopleCount;
  return perPerson.toFixed(2);
}

额外说明 #

• toFixed()方法返回字符串类型，直接和数字相加会触发字符串拼接，必须用Number()转成数字后再计算
• 用返回值+参数传递的方式，既符合函数单一职责原则，也避免了全局变量带来的潜在问题

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