Accessing global variable from function in Javascript-CodePudding

I would like to access variable from inside a function. The variable tip is innerText of different buttons (5, 6, 7...), but they are in %, so I converted them into numbers. However, the numbers are accessible only from inside the percentage function. When I try to call the function and log the variable, it shows NaN. I would like to use the tip for calculation in calc function always after clicking a respective button. How can I do that?

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);

To make it little bit smaller: I cant access numbers from variable tip, which innerText of buttons with different values (5%, 10%...). These numbers are converted from strings to numbers in the percentage function. I can access the correct tip values after clicking on buttons only if I log it directly inside the percentage function. I would like to use it outside the function, however.

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

CodePudding user response：

you need change string to integer before you calculation parseInt(peopleInput.value)

CodePudding user response：

In the if (billInput !== "" && peopleInput === ""), you should return to not execute the reset of the function, Also the inputs values be as string format, you need to convert to number, you can use operator. 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 === "") {
    // if there no value doesn't execute the rest of the function.
    return 
  }
  individualTip.textContent = ( billInput.value / 100) * tip;

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

document.addEventListener("input", calc);