加载页面时如何访问函数内的输入值

Question

看下面的示例代码块，

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="">

我的问题是当点击事件发生时，我无法将输入值输入到函数中。这是在页面加载时发生。但是当输入改变时我可以得到它。

我尝试了以下方法，但是 none 对我有用。

$('#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

如果你可以使用 jQuery 这样的更改通常对我来说效果很好！

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

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

Answer 2

首先我不知道你的问题。
可能是您的意思是页面开始加载时。
不幸的是渲染 html 输入表单，在这种情况下我们无法承受我们的 javascript 无法工作（无法控制输入表单）。
（或）当用户提交表单时，您的页面将开始加载，在这种情况下您可以禁用输入表单。我也这么认为，
这就是为什么你的代码应该是

<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

考虑以下示例。

$(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>.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>

通过适当的委托，您可以根据需要执行函数。

加载页面时如何访问函数内的输入值

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

javascript

jquery