Question

我在表单上调用onchange事件，但是当我签入控制台值时，Nan中出现了

HTML

<form onchange="calculateHSA(event)">
<div class="col-sm-4">
    <input type="number" name="claim-amnt" id="claim-amnt" required="">
</div>
<div class="col-sm-4">
    <input type="number" name="admin-percent" id="admin-percent" required="">
</div>
<div class="col-sm-4">
    <span class="dataText">Select your province
    </span><br>
    <select name="province" id="province">
        <option value="abc">ABC</option>
    </select>
</div>
</form>

JavaScript

function calculateHSA(e) {
    e.preventDefault();
    const claimAmount = parseInt($(e.target).find('#claim-amnt').val());
    console.log(claimAmount);
    const adminPercent = parseInt($(e.target).find('#admin-percent').val());
    console.log(adminPercent);
    const province = $(e.target).find('#province').val();
    console.log(province);
    displayTaxDetails(claimAmount, adminPercent, province);
}

我在哪里输入了错误的代码？

Answer 1

请使用e.currentTarget代替e.target，因为e.target可以是您的文本字段，但是e.currentTarget始终是您的表单。这段代码可以正常工作。

<form onchange="calculateHSA(event)">
<div class="col-sm-4">
    <input type="number" name="claim-amnt" id="claim-amnt" required="">
</div>
<div class="col-sm-4">
    <input type="number" name="admin-percent" id="admin-percent" required="">
</div>
<div class="col-sm-4">
    <span class="dataText">Select your province
    </span><br>
    <select name="province" id="province">
        <option value="abc">ABC</option>
    </select>
</div>
</form>
<script>
    function calculateHSA(e) {
    e.preventDefault();
    const claimAmount = parseInt($(e.currentTarget).find('#claim-amnt').val());
    console.log(claimAmount);
    const adminPercent = parseInt($(e.currentTarget).find('#admin-percent').val());
    console.log(adminPercent);
    const province = $(e.currentTarget).find('#province').val();
    console.log(province);
    displayTaxDetails(claimAmount, adminPercent, province);
}
</script>

Answer 2

您的示例中无需使用e.target。您可以直接从选择器中访问值：

function calculateHSA(e) {
  e.preventDefault();
  const claimAmount = parseInt($('#claim-amnt').val());
  console.log(claimAmount);
  const adminPercent = parseInt($('#admin-percent').val());
  console.log(adminPercent);
  const province = parseInt($('#province').val());
  console.log(province);
  displayTaxDetails(claimAmount, adminPercent, province);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onchange="calculateHSA(event)">
  <div class="col-sm-4">
    <input type="number" name="claim-amnt" id="claim-amnt" required="">
  </div>
  <div class="col-sm-4">
    <input type="number" name="admin-percent" id="admin-percent" required="">
  </div>
  <div class="col-sm-4">
    <span class="dataText">Select your province
    </span><br>
    <select name="province" id="province">
      <option value="abc">ABC</option>
    </select>
  </div>
</form>

请注意，对于任何没有可解析为整数的值的字段，您将在控制台中获得NaN。因此，如果将该字段留空，您仍将在控制台中获得NaN。

Answer 3

您得到NaN，因为您的目标元素指向输入标签而不是表单元素

我对函数进行了一些更改，并在代码中添加了新行

function calculateHSA(e) {
    e.preventDefault();
    var form = $(e.target).parent().parent(); // <-- get the form element
    const claimAmount = form.find('#claim-amnt').val();
    console.log(claimAmount);
    const adminPercent = form.find('#admin-percent').val();
    console.log(adminPercent);
    const province = form.find('#province').val();
    console.log(province);
    displayTaxDetails(claimAmount, adminPercent, province);
}

看看这个https://plnkr.co/edit/BQ538zbYBk857zT1wAgT的塞子

JavaScript表单onchange得到Nan

3 个答案: