title: Why only the first function inside onclick event handler sets innertext properly and the second one gives NaN?
body: <p>I tried to create a basic expense tracker website using DOM manipulation. When I am calling two function at a time in an onClick event handler, the one I called at first place does it's job fine to set the innertext in html. But the function I call after first one sets the innerText as NaN! It behaves same even if I replace the position of the function. Here is my HTML &amp; JS code in order.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function expenseCalculation() {
  
    expenseAndBalance("expense");
    expenseAndBalance("balance");
  
  }
  
  // expense calculation shared function
  function calculationReuse(inputId) {
    const expneseInput = document.getElementById(inputId);
    const expneseInputValue = expneseInput.value;
    const expenseAmount = parseFloat(expneseInputValue);
    expneseInput.value = "";
    return expenseAmount;
  }
  // Getting Total expenses &amp; balance Text
  function expenseAndBalance(textId) {
    const income = calculationReuse("income-input");
    const foodExpense = calculationReuse("food-input");
    const rentExpnese = calculationReuse("rent-input");
    const clothesExpense = calculationReuse("clothes-input");
    const totalExpense = foodExpense + rentExpnese + clothesExpense;
    const balance = income - totalExpense;
    const moneyAmount = document.getElementById(textId);
    const moneyAmountText = moneyAmount.innerText;
    const moneyAmountNumber = parseFloat(moneyAmountText);
    if (textId == "expense") {
      moneyAmount.innerText = totalExpense;
    } else {
      moneyAmount.innerText = balance;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;h1 class="text-3xl font-semibold text-emerald-500 text-center mt-12 heading"&gt;
      Expense Tracker 
    &lt;/h1&gt;
  &lt;/header&gt;
  &lt;main&gt;
    &lt;!-- Image part --&gt;
    &lt;div class="grid grid-cols-2 gap-4 mt-12 mx-8 media-query"&gt;
      &lt;div class="money-pic"&gt;
        &lt;img src="images/coins-paper-money-globe-white-statistic-form-background.jpg" alt="" /&gt;
      &lt;/div&gt;
      &lt;!-- Calculation part --&gt;
      &lt;div class="calculation-part bg-slate-200"&gt;
        &lt;div class="texts-and-inputs mx-auto"&gt;
          &lt;h3 class="text-center font-semibold text-lg my-4"&gt;Income&lt;/h3&gt;
  
          &lt;div class="calculation-inputs text-center"&gt;
            &lt;h2 class="inline text-base font-medium"&gt;Income:&lt;/h2&gt;
            &lt;input class="bg-neutral-300" type="text" name="" id="income-input" /&gt;
            &lt;h3 class="text-center font-semibold text-lg my-4"&gt;Expenses&lt;/h3&gt;
            &lt;div class="block mb-2"&gt;
              &lt;h2 class="inline text-base font-medium"&gt;Food:&lt;/h2&gt;
              &lt;input class="bg-neutral-300" type="text" name="" id="food-input" /&gt;
            &lt;/div&gt;
            &lt;div class="block mb-2"&gt;
              &lt;h2 class="inline text-base font-medium"&gt;Rent:&lt;/h2&gt;
              &lt;input class="bg-neutral-300" type="text" name="" id="rent-input" /&gt;
            &lt;/div&gt;
            &lt;div class="block mb-2"&gt;
              &lt;h2 class="inline text-base font-medium"&gt;Clothes:&lt;/h2&gt;
              &lt;input class="bg-neutral-300" type="text" name="" id="clothes-input" /&gt;
            &lt;/div&gt;
            &lt;button onclick="expenseCalculation()" class="px-4 py-2 my-2 rounded-sm bg-sky-500 text-white"&gt;
                      Calculate
                    &lt;/button&gt;
            &lt;h3 class="text-center font-semibold text-lg my-2"&gt;
              Total Expenses: &lt;span id="expense"&gt;5500&lt;/span&gt;
            &lt;/h3&gt;
            &lt;h3 class="text-center font-semibold text-lg my-2"&gt;
              Balance: &lt;span id="balance"&gt;4500&lt;/span&gt;
            &lt;/h3&gt;
            &lt;div class="block mb-2"&gt;
              &lt;h2 class="inline text-base font-medium"&gt;Save:&lt;/h2&gt;
              &lt;input class="bg-neutral-300 w-14" type="text" name="" id="save-input" /&gt;
              &lt;span class="font-semibold text-lg"&gt;%&lt;/span&gt;
              &lt;button class="px-2 py-1 my-2 rounded-sm bg-sky-500 text-white"&gt;
                        Save
                      &lt;/button&gt;
              &lt;h3 class="text-center font-semibold text-lg my-2"&gt;
                Saving amount: 2000
              &lt;/h3&gt;
              &lt;h3 class="text-center font-semibold text-lg my-2 pb-4"&gt;
                Remaining balance: 2500
              &lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>