How I access input value inside a function when page is load

Question

Look at the sample code block below,

var tax = 0;

function taxCalc () {
  var subtotal  = parseFloat(0);
  if (tax < 0 || tax > 100 || tax == '') {
    tax = 0;
    taxInput = 0;
  } else {
    taxInput = parseFloat(subtot) * (parseFloat(tax) / 100);
  }

  $(document).find(".inline_subtotal").each(function (i, obj) {
    subtotal = (parseFloat(subtotal) + parseFloat($(this).text())).toFixed(2);
  });

  console.log(tax)
}

$('#taxInput').on('change blur', '#taxInput', function() {
  tax = $(this).val();
  taxCalc(); 
});


$(document).on("click", ".remove", function () {
  $("#item-row").remove();
  taxCalc();
});

<input type="text" id="taxInput" name="taxInput" value="">

My problem is I can't get input value into function, when the click event occurs. This is happen when the page is loading. but I can get it when input change.

I tried it as following ways, but none of them work for me.

$('#taxInput').on('change blur', '#taxInput', function() {
  tax = $(this).val();
  taxCalc(); 
}).trigger('change'); 

$(document).on("click", ".remove", function () {
  var id = $(this).data("id");
  $("#item-row-"+id).remove();

  var timeout = null;
  if (timeout) clearTimeout(timeout)
  timeout = setTimeout(function() {
    taxCalc ();
  }, 10)

Answer 1

Consider the following example.

$(function() {
  function taxCalc(subTotal, tax) {
    // Default Value
    var output = 0;
    // Cast strings or Integers to Float
    subTotal = parseFloat(subTotal);
    tax = parseFloat(tax);
    if (tax < 0 || tax > 100 || tax == '') {
      tax = 0;
    } else {
      output = subTotal * (tax / 100);
    }
    // Output total as currency (2 decimal places)
    return output.toFixed(2);
  }

  function calcTotal() {
    // Default Value
    var total = 0;
    // Iterate each Item, sum the price total of each
    $("table tbody tr.items").each(function(i, row) {
      total += parseFloat($(".item-total > span", row).text());
    });
    // Update Sub-Total in Table
    $(".sub-total").html(total.toFixed(2));
    // Calculate Tax amount based on Percentage
    var tax = parseFloat(taxCalc(total, $("#taxInput").val()));
    // Update Tax Amount
    $(".tax-amount").html(tax);
    total += tax;
    // Update Total
    $(".price-total").html(total.toFixed(2));
  }

  // Event Callbacks
  $('table').on('change blur', '#taxInput', function(event) {
    $(".tax-amount").html(taxCalc($(".sub-total").text(), $("#taxInput").val()));
    calcTotal();
  });

  $("table .items").on("click", ".remove", function() {
    $(this).closest("tr").remove();
    calcTotal();
  });
});

table {
  width: 480px;
  border-collapse: collapse;
}

table tr {
  margin-top: 3px;
}

table tr.border-under {
  border-bottom: 2px solid black;
}

table .col-center {
  text-align: center;
}

table .col-right {
  text-align: right;
}

table td input {
  width: 5em;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
      <th>Qnty
        <th>
          <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-under items">
      <td>Item 1</td>
      <td>$42.00 US</td>
      <td class="col-center"><span>2</span><button class="decrease" title="Decrease">-</button><button class="increase" title="Increase">+</button><button class="remove" title="Remove">x</button></td>
      <td class="col-right item-total">$<span>82.00</span> US</td>
    </tr>
    <tr>
      <td colspan="3" class="col-right">Sub Total:</td>
      <td class="col-right">$<span class="sub-total">82.00</span> US</td>
    </tr>
    <tr class="border-under">
      <td colspan="3" class="col-right">Tax: <input type="number" min="0.00" max="100.00" step="0.01" id="taxInput" name="taxInput" value="9.25">%</td>
      <td class="col-right">$<span class="tax-amount">7.59</span> US</td>
    </tr>
    <tr>
      <td colspan="3" class="col-right">Total:</td>
      <td class="col-right">$<span class="price-total">89.59</span> US</td>
    </tr>
</table>

With the proper delegation, you can execute Functions as needed.

Answer 2

First I didn't know your question .
May be you mean that when page start loading.
Unfornuately render html input form in that case we can't affort our javascript can't work (cant control input form).
(or) When user submit form , your page'll start loading in that case you can disable your input form. I think so ,
That's why your code should be

<html>
<head>
  <!-- another scripts, css files --> 
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>

  <!-- Before rendering your input form --> 
  <script>
   $(document).ready(function () {
     // After Page Loading, we'll clear disabled form to be active
     $("#taxInput").removeAttr('disabled');
     
     $("#taxInput").change(function (e) {
       tax = $(this).val();
       console.log(tax);
       // taxCalc(); 
     });

     // if after submiting
     $("#form").on("submit", function(e) {
       // Disabled Your Input
       e.preventDefault();
       $('#taxInput').attr('disabled', true);
     });
   });
  </script>
</head>
<body>
  <!-- another codes -->
  <form id="form">
    <input type="text" id="taxInput" name="taxInput" value="" disabled>
    <button type="submit">submit</button>
  </form>
</body>
</html>

Answer 3

If you can use jQuery a change like this usually works well for me!

$("#taxInput").change(function (e) {

   tax = $(this).val();
   taxCalc(); 
});