Question

我正在尝试使用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);

}

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

我不是一个真正的程序员，你可以说，我只是努力。

丹

Answer 1

在你的剧本中有一些错误。

条件不是选择元素。
var未正确设置值
var result使用两个未声明的变量
在使用结果
您不会更改结果的值。

以下是我认为它应该如何寻找您的预期功能。

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);
});

jQuery财产税计算器

1 个答案: