时间戳

首页 > 解决方案 > jQuery 房产税计算器

jquery - jQuery 房产税计算器

问题描述

我正在尝试使用 jQuery 制作一个非常简单的表单计算器...

<form>
<label for="taxableValue">Enter your property’s TAXABLE Value</label>
<input type="text" class="form-control" id="taxableValue" placeholder="TAXABLE Value">
<div class="radio">

<!--Radio group-->
<div class="form-check">
<input class="form-check-input" name="millageRate" type="radio" id="radio100" value="0.6043">
<label class="form-check-label" for="radio100">$20 million bond issuance (.6043 mills)</label>

</div>
<div class="form-check">
<input class="form-check-input" name="millageRate" type="radio" id="radio101" value="0.9046">
<label class="form-check-label" for="radio101">$30 million bond issuance (.9046 mills)</label>

</div>

<div class="form-check">
<input class="form-check-input" name="millageRate" type="radio" id="radio102" value="1.2051">
<label class="form-check-label" for="radio102">$40 million bond issuance (1.2051 mills)</label>

</div>
</div>
<div class="result"></div>

    </form>

这是我的 jQuery 代码...

function compute() {
if ( $('select[name=millageRate]:checked').val() != undefined ) {
    var a = $('input[name=taxableValue]:number').val();
    var b = $('input[name=millageRate]:checked').val();
    var result = (taxableValue / 1000) * millageRate;
   }
};
$('input[name=taxableValue]').change(compute);
$('select[name=millageRate]').change(compute);

}

谁能告诉我我做错了什么？

我不是一个真正的编码员，你可能会说，我只是努力。

担

标签： jquerymath

解决方案

在您的脚本中有一些错误。

  1. Conditional 不是选择元素。
  2. var 值设置不正确
  3. var 结果正在使用两个未声明的变量
  4. 您在使用结果之前结束您的功能
  5. 您不会更改结果的值。

这就是我认为它应该如何寻找你想要的功能。

function compute() {
    if ( $('input[name=millageRate]:checked').val() != undefined ) {
        var a = $('#taxableValue').val();
        var b = $('input[name=millageRate]:checked').val();
        var result = (a / 1000) * b;
    }
    $('#result').text(result);
}

然后在您的 HTML 中添加一个按钮，单击该按钮将运行此功能。

<input type="button" value="Calculate" onclick="compute()"></input>

这是我用来让它工作的完整代码。

<form>
  <label for="taxableValue">Enter your property’s TAXABLE Value</label>
  <input type="text" class="form-control" id="taxableValue" placeholder="TAXABLE Value">
  <div class="radio">

  <!--Radio group-->
  <div class="form-check">
    <input class="form-check-input" name="millageRate" type="radio" id="radio100" value="0.6043">
    <label class="form-check-label" for="radio100">$20 million bond issuance (.6043 mills)</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" name="millageRate" type="radio" id="radio101" value="0.9046">
    <label class="form-check-label" for="radio101">$30 million bond issuance (.9046 mills)</label>
  </div>

  <div class="form-check">
    <input class="form-check-input" name="millageRate" type="radio" id="radio102" value="1.2051">
    <label class="form-check-label" for="radio102">$40 million bond issuance (1.2051 mills)</label>
  </div>
  </div>
  <input type="button" value="Calculate" onclick="compute()"></input>
  <script>
    function compute() {
      if ( $('input[name=millageRate]:checked').val() != undefined ) {
        var a = $('#taxableValue').val();
        var b = $('input[name=millageRate]:checked').val();
        var result = (a / 1000) * b;
      }
      $('#result').text(result);
    }
  </script>
  <div class="result" id="result"></div> 
</form>

如果您不想将按钮作为控制字段，则可以将其删除，并将侦听器添加到单选组和文本字段以实现相同的结果。

$(function(){
  var compute = function(){
    if ( $('input[name=millageRate]:checked').val() != undefined ) {
      var a = $('#taxableValue').val();
      var b = $('input[name=millageRate]:checked').val();
      var result = (a / 1000) * b;
    }
    $('#result').text(result);  
  }
  $('#taxableValue').on("keyup", compute);
  $('form').on("change", compute);
});

推荐阅读