Javascript 函数未在所需字段中给出算术值

Question

我正在 HTML 表单中使用 Javascript 实现算术运算符的简单功能。但它不起作用。这似乎是正确的，但不知道为什么它没有在所需的领域显示出值(value)。请仔细阅读我的以下代码和指南。

var input = $('[name="ServiceTotalCost"],[name="GrantRequest"],[name="MatchingShare"]'),
  ServiceTotalCost = $('[name="ServiceTotalCost"]'),
  GrantRequest = $('[name="GrantRequest"]'),
  MatchingShare = $('[name="MatchingShare"]');

input.change(function() {
  var ServiceTotalCost = (isNaN(parseInt(ServiceTotalCost.val()))) ? 0 : parseInt(ServiceTotalCost.val());
  var GrantRequest = (isNaN(parseInt(GrantRequest.val()))) ? 0 : parseInt(GrantRequest.val());

  if (ServiceTotalCost > GrantRequest) {
    Difference = ServiceTotalCost - GrantRequest;
    MatchingShare.val(Difference);
  } else if (GrantRequest >= ServiceTotalCost) {
    PercentAge = (GrantRequest * 20) / 100;
    MatchingShare.val(PercentAge);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
  <div class="form-group form-float">
    <h2>*Support Requried Through Grant</h2><br>
    <div class="form-line">
      <input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
      <label class="form-label">Total cost of the service (Rs.)</label>
    </div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-group form-float">
    <div class="form-line">
      <input type="number" class="form-control" name="GrantRequest" max="500000" id="GrantRequest" required>
      <label class="form-label">Amount of grant requested (Rs.)*</label>
    </div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-group form-float">
    <div class="form-line">
      <input type="number" name="MatchingShare" id="MatchingShare" class="form-control" readonly>
      <label class="form-label">Matching share by the applicant (Rs.)</label>
    </div>
  </div>
</div>

Answer 1

您将在控制台中看到以下内容:

Uncaught TypeError: Cannot read property 'val' of undefined

原因是 change 处理程序中的类似内容:

var ServiceTotalCost = (isNaN(parseInt(ServiceTotalCost.val()))) ? 0 : parseInt(ServiceTotalCost.val());

这会创建一个本地 ServiceTotalCost 变量，该变量最初的值为undefined，然后在其初始化程序中尝试将其用作对象。 (我假设您打算从函数外部使用 ServiceTotalCost，但本地遮蔽它，使其无法访问。)

为本地变量提供与处理程序关闭的变量不同的名称，这些变量保存字段的 jQuery 对象。

你的代码也成为我所说的The Horror of Implicit Globals的牺牲品。通过在分配之前不声明 Difference 和 PercentAge，您将创建全局变量。相反，声明它们。

最后，JavaScript 中压倒性的约定是变量以小写字母开头，因此是 difference 而不是 Difference 等。(此外， 百分比通常不大写)。

例如:

var input = $('[name="ServiceTotalCost"],[name="GrantRequest"],[name="MatchingShare"]'),
  ServiceTotalCost = $('[name="ServiceTotalCost"]'),
  GrantRequest = $('[name="GrantRequest"]'),
  MatchingShare = $('[name="MatchingShare"]');

input.change(function() {
  var cost = (isNaN(parseInt(ServiceTotalCost.val()))) ? 0 : parseInt(ServiceTotalCost.val());
  var request = (isNaN(parseInt(GrantRequest.val()))) ? 0 : parseInt(GrantRequest.val());

  if (cost > request) {
    var difference = cost - request;
    MatchingShare.val(difference);
  } else if (request >= cost) {
    var percentage = (request * 20) / 100;
    MatchingShare.val(percentage);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
  <div class="form-group form-float">
    <h2>*Support Requried Through Grant</h2><br>
    <div class="form-line">
      <input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
      <label class="form-label">Total cost of the service (Rs.)</label>
    </div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-group form-float">
    <div class="form-line">
      <input type="number" class="form-control" name="GrantRequest" max="500000" id="GrantRequest" required>
      <label class="form-label">Amount of grant requested (Rs.)*</label>
    </div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-group form-float">
    <div class="form-line">
      <input type="number" name="MatchingShare" id="MatchingShare" class="form-control" readonly>
      <label class="form-label">Matching share by the applicant (Rs.)</label>
    </div>
  </div>
</div>

<小时/>

请注意，您不需要像这样的行中的条件运算符:

var cost = (isNaN(parseInt(ServiceTotalCost.val()))) ? 0 : parseInt(ServiceTotalCost.val());

由于 NaN 和 0 都是假值，因此您可以使用 || 来获得相同的结果:

var cost = parseInt(ServiceTotalCost.val()) || 0;

我应该注意，parseInt 可能是也可能不是转换为数字的最佳选择；请参阅my answer here了解您的选择及其优缺点。

您可能根本不需要解析。在现代浏览器上，您可以从 valueAsNumber 属性获取数值。也就是说，如果您需要支持没有它的旧版浏览器，它对您没有多大帮助:

var cost = ServiceTotalCost.prop("valueAsNumber") || parseInt(ServiceTotalCost.val()) || 0;

但是，如果您不必支持不支持 type="number" 的浏览器，那么:

var cost = ServiceTotalCost.prop("valueAsNumber");