Accessing global variable from function in Javascript

Question

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

Answer 1

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

Answer 2

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

Answer 3

OK. So for anyone who would encounter similar problem, I solved this one. My variables and fucntions works properly. All I had to do was to put function calc() as the last line inside percentage() function. That did the trick. That's it.