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>

谁能告诉我我做错了什么

我不是一个真正的程序员，正如你可能知道的，我只是努力而已

---

丹

在你的剧本中有一些地方出错了

条件不是选择元素。 var A值设置不正确 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>

---

你能先告诉我出了什么事吗？发生了什么？你期望发生什么？控制台中是否有错误消息？好的，我希望result div显示对milagesRate radios或taxableValue字段的任何更改的计算。millageRate元素不是select，因此选择器不正确。val还返回一个空字符串，否则将返回！=未定义的检查将始终命中。此外，您计算结果，但不对其执行任何操作。不要在计算函数内创建更改事件绑定。每次函数运行时，它都会创建新的函数。在该方法之外创建它们，仅创建一次。谢谢Greg。这确实有效。我希望不用按钮也能做到，提供了一个不用按钮的例子。

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