jQuery Калькулятор налога на имущество

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

В вашем скрипте было несколько неправильных вещей.

1. Условное не является элементом выбора.
2. var Значение установлено неправильно
3. var resultиспользует две необъявленные переменные
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);
});