为什么我的小费计算器总是得到 NaN 值？

Question

I can't find out what is going wrong in my code. Thank you. I have attached the link to code via codepen.

https://codepen.io/tenzin12/pen/rNmmPbv

`const confirmBtn = document.querySelector(".confirm");

const tipField = document.querySelector(".p1");
const totalField = document.querySelector(".p2");

const tipPercentage = document.querySelector("#tip").children;
const customTip = document.querySelector(".custom").value;

const inputAmt = document.querySelector("#amount").value;
const totalPerson = document.querySelector(".number_of_people").value;

const calcFunction = (bill, percent, diners) => {
  const percentage = percent / 100;
  const tipPerPerson = (bill * percentage) / diners;

  const finalBillPerPerson = bill / diners;
  const finalWithTip = finalBillPerPerson + tipPerPerson;

  tipField.textContent = tipPerPerson;
  totalField.textContent = finalWithTip;
};

for (let i = 0; i < tipPercentage.length; i++) {
  tipPercentage[i].addEventListener("click", () => {
    if (parseInt(totalPerson) > 0) {
      if (tipPercentage[i].value.toUpperCase() === "CUSTOM") {
        calcFunction(parseFloat(inputAmt), parseInt(customTip), parseInt(totalPerson));
      }
    }
    calcFunction(parseFloat(inputAmt), parseInt(tipPercentage[i].value), parseInt(totalPerson));
  });
}
`

Answer 1

When you need to run calculations on element values, you need to collect those values at the time of calculation. You were collecting them up front - but then when you were calculating the function, it was using those old values. I moved those into your function. Note how I got rid of most of the parseInt and parseFloat functions in favor of the minimal + operator which does the same thing.

Additionally, I simplified the code a little and put in a validation to prevent totals being run on 0 people or 0 amounts. Finally, I changed your for loop into an HTMLCollection forEach loop. I find it is easier to read and maintain

const confirmBtn = document.querySelector(".confirm");
const tipField = document.querySelector(".p1");
const totalField = document.querySelector(".p2");
const tipPercButtons = document.querySelectorAll("#tip input.percentage");

const calcFunction = (bill, percent, diners) => {
    const percentage = percent / 100;
    const tipPerPerson = (bill * percentage) / diners;

    const finalBillPerPerson = bill / diners;
    const finalWithTip = finalBillPerPerson + tipPerPerson;

    tipField.textContent = tipPerPerson;
    totalField.textContent = finalWithTip;
};

tipPercButtons.forEach((el) =>
    el.addEventListener("click", (e) => {
        const customTip = +document.querySelector(".custom").value;
        const inputAmt = +document.querySelector("#amount").value;
        const totalPerson = +document.querySelector(".number_of_people").value;
        if (isNaN(totalPerson) || isNaN(inputAmt)) {
            alert("Please designate the number of people and the amount of the bill")
            return;
        }
        if (totalPerson === 0) return;
        let val
        if (e.target.value.toUpperCase() === "CUSTOM") val = customTip;
        else val = parseInt(e.target.value);
        calcFunction(inputAmt, val, totalPerson);
    })
);

Updated pen: https://codepen.io/john-tyner/pen/MWmmLMQ?editors=1111

Answer 2

i analysed your code there is some error in fetching the input value in the code. below is the correct code. Hope this might work make the following little changes in your code:

const inputAmt = document.querySelector("#amount");
const totalPerson = document.querySelector(".number_of_people");

and this at the bottom outside the if block

calcFunction(
  parseFloat(inputAmt.value),
  parseInt(tipPercentage[i].value),
  parseInt(totalPerson.value)
);

overall your calculator is So interesting.