javascript how to use first function output in second function

I have some question since I’ve just started learning JS I’m trying different challenges on Scrimba. In this particular challenge you have to build tip calculator which also counts the bill to be splited depending on how many people are sharing. I’ve tried to solve this but I’m stuck. How to acess the first calculateTotal() function result and use it in this second function calculateSplitTotal(). problably I’ve messed sth up since the second output shows NAN. I hope you understand what I’m talking about. here’s the code:

const calcBtn = document.getElementById("calculate-btn")

calcBtn.addEventListener("click", calculateTotal);
window.addEventListener("keyup", function(e) {
  if (e.keyCode === 13) {
    calculateTotal();
  }
});

function calculateTotal() {
  const billValue = parseFloat(document.getElementById("bill_value").value)
  const tipValue = parseFloat(document.getElementById("tip_value").value)
  const totalTip = billValue * tipValue / 100
  const billTotal = billValue + totalTip


  const totalField = document.getElementById("total")

  totalField.innerText = billTotal.toLocaleString("en", {
    style: "currency",
    currency: "USD"
  })

}
const billTotal = calculateTotal() //how to access the result of first function//

console.log(billTotal)
const splitBtn = document.getElementById("split-btn")

splitBtn.addEventListener("click", calculateSplitTotal);

function calculateSplitTotal() {
  const peopleTotal = parseInt(document.getElementById("people-value").value)
  const splitTotalValue = document.getElementById("split-total-value");
  const splitTotal = billTotal / peopleTotal
  console.log(splitTotal)
  splitTotalValue.innerText = splitTotal.toLocaleString("en", {
    style: "currency",
    currency: "USD"
  })


}
body {
  background-color: #9370DB;
  color: #fff;
  margin: 0;
  display: flex;
  font-family: 'Poppins', sans-serif;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.calculator_container {
  background-color: rebeccapurple;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  padding: 2rem 3rem;
}

h1 {
  margin: 0 0 1rem;
  text-align: center;
}

.form_control {
  margin: 0.75rem 0;
}

.form_control input {
  padding: 0.25rem;
  width: 100%;
}

.form_control label {
  display: block;
}

.calculator_container footer {
  margin-top: 2rem;
}

.result {
  display: flex;
  justify-content: space-between;
}
<div class="calculator_container">
  <h1>Tip Calculator</h1>
  <div class="form_control">
    <label for="bill">Bill (in $)</label>
    <input type="number" id="bill_value" placeholder="100" />
  </div>

  <div class="form_control">
    <label for="tip">Tip %</label>
    <input type="number" id="tip_value" placeholder="10" />
  </div>
  <button id="calculate-btn">CALCULATE</button>
  <div class="form_control">
    <label for="people">People sharing</label>
    <input type="number" id="people-value" placeholder="10" />
  </div>
  <button id="split-btn">Calculate split</button>
  <footer>
    <div class="result">
      <span>Total:</span> <strong id="total">[$110]</strong>
    </div>
    <div class="result">
      <span>Total for person:</span> <strong id="split-total-value">[$110]</strong>
    </div>
  </footer>
</div>

https://codepen.io/MagWebDev/pen/powzeEZ.

const billTotal = calculateTotal() //how to access the result of first function//

Answer

You have to return value from a function. In order to use or store returned value in a variable.

const calcBtn = document.getElementById("calculate-btn")

calcBtn.addEventListener("click", calculateTotal);
window.addEventListener("keyup", function(e) {
  if (e.keyCode === 13) {
    calculateTotal();
  }
});

function calculateTotal() {
  const billValue = parseFloat(document.getElementById("bill_value").value)
  const tipValue = parseFloat(document.getElementById("tip_value").value)
  const totalTip = billValue * tipValue / 100
  const billTotal = billValue + totalTip


  const totalField = document.getElementById("total")

  totalField.innerText = billTotal.toLocaleString("en", {
    style: "currency",
    currency: "USD"
  })
 return billTotal;
}
const billTotal = calculateTotal() //now you can access the result of first function//

console.log(billTotal)
const splitBtn = document.getElementById("split-btn")

splitBtn.addEventListener("click", calculateSplitTotal);

function calculateSplitTotal() {
  const peopleTotal = parseInt(document.getElementById("people-value").value)
  const splitTotalValue = document.getElementById("split-total-value");
  const splitTotal = billTotal / peopleTotal
  console.log(splitTotal)
  splitTotalValue.innerText = splitTotal.toLocaleString("en", {
    style: "currency",
    currency: "USD"
  })


}
body {
  background-color: #9370DB;
  color: #fff;
  margin: 0;
  display: flex;
  font-family: 'Poppins', sans-serif;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.calculator_container {
  background-color: rebeccapurple;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  padding: 2rem 3rem;
}

h1 {
  margin: 0 0 1rem;
  text-align: center;
}

.form_control {
  margin: 0.75rem 0;
}

.form_control input {
  padding: 0.25rem;
  width: 100%;
}

.form_control label {
  display: block;
}

.calculator_container footer {
  margin-top: 2rem;
}

.result {
  display: flex;
  justify-content: space-between;
}
<div class="calculator_container">
  <h1>Tip Calculator</h1>
  <div class="form_control">
    <label for="bill">Bill (in $)</label>
    <input type="number" id="bill_value" placeholder="100" />
  </div>

  <div class="form_control">
    <label for="tip">Tip %</label>
    <input type="number" id="tip_value" placeholder="10" />
  </div>
  <button id="calculate-btn">CALCULATE</button>
  <div class="form_control">
    <label for="people">People sharing</label>
    <input type="number" id="people-value" placeholder="10" />
  </div>
  <button id="split-btn">Calculate split</button>
  <footer>
    <div class="result">
      <span>Total:</span> <strong id="total">[$110]</strong>
    </div>
    <div class="result">
      <span>Total for person:</span> <strong id="split-total-value">[$110]</strong>
    </div>
  </footer>
</div>