如何根据输入量和选择来确定得分

时间:2017-12-22 23:32:26

标签: javascript jquery

我试图在Javascript中创建简单的VAT计算。它应该工作,首先我在#vat-amount中设置金额然后我选择.rate然后我可以点击两个按钮中的一个来显示我的结果。

但是我的控制台显示没有定义ReferenceError:rateValue。 但我在调用brutto或netto函数之前定义它。怎么了?

这是我的代码&的jsfiddle:

// Select your input element.
var fixnumber = document.getElementById('vat-amount');

// Listen for input event on numInput.
fixnumber.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || (e.keyCode == 188)
      || e.keyCode == 8)) {
        return false;
    }
}

// Jquery function
$('.rate').on('change', function rateValue() {
    var value =this.value;
        if(value == 'five')
        {
          var ratemoney = 5
        }
        else if (value == 'eight') 
        {
            var ratemoney = 8
        }
        else {
            var ratemoney = 23
        }
    });

    var vatamount;
function setValues() { 
    vatamount = Number(document.getElementById("vat-amount").value);
}

function brutto() {
    setValues();
    rateValue();
    result = (vatamount * (ratemoney / 100) + vatamount);
    score = result.toFixed(2);
    document.getElementById("howmuch").innerHTML = score;
}
function netto() {
    setValues();
    rateValue();
    result = (vatamount - ((ratemoney / 100) * vatamount));
    var score = result.toFixed(2);
    document.getElementById("howmuch").innerHTML = score;
}

https://jsfiddle.net/rq620kzo/2/

很抱歉,我将Jquery与Javascript混合在一起。

2 个答案:

答案 0 :(得分:0)

您无法在事件处理程序中定义命名函数。在外面定义它,你可以从处理程序中调用它。

答案 1 :(得分:0)

我将rateValue函数移出到您尝试访问它的范围。如果您要修改函数外部使用的值,请不要在函数内重新声明它们

&#13;
&#13;
// Select your input element.
var fixnumber = document.getElementById('vat-amount');

var ratemoney;

// Listen for input event on numInput.
fixnumber.onkeydown = function(e) {
  if (!((e.keyCode > 95 && e.keyCode < 106) ||
      (e.keyCode > 47 && e.keyCode < 58) ||
      (e.keyCode == 188) ||
      e.keyCode == 8)) {
    return false;
  }
}

// Jquery function
$('.rate').on('change', rateValue);

var vatamount;

function rateValue() {
  var value = $('.rate').val();
  if (value == 'five') {
    ratemoney = 5
  } else if (value == 'eight') {
    ratemoney = 8
  } else {
    ratemoney = 23
  }
}

function setValues() {
  vatamount = Number(document.getElementById("vat-amount").value);
}

function brutto() {
  setValues();
  rateValue();
  result = (vatamount * (ratemoney / 100) + vatamount);
  score = result.toFixed(2);
  document.getElementById("howmuch").innerHTML = score;
}

function netto() {
  setValues();
  rateValue();
  result = (vatamount - ((ratemoney / 100) * vatamount));
  var score = result.toFixed(2);
  document.getElementById("howmuch").innerHTML = score;
}
&#13;
body {
  padding: 0;
  margin: 0;
}

.site-background {
  background: #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  max-width: 70vw;
  background: #c1c1c1;
}

.first-vat-calc h2 {
  display: inline;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-background">
  <div class="container">
    <h1>Kalkulatory dla pracownika</h1>
    <h2>Oblicz VAT 23% </h2>
    <div class="first-vat-calc">
      <h2>Podaj kwotę</h2><input id="vat-amount" type="number" style="vat-money-input" pattern="[0-9]+([\.,][0-9]+)?" step="0.01" min="0">
      <h2>Podaj stawkę VAT</h2><select name="vatrate" class="rate" style="vat-money-input">
                    <option value="five">5%</option>
                    <option value="eight">8%</option>
                    <option value="twentythree">23%</option>
                  </select>
      <input type="button" onclick="brutto()" value="oblicz brutto">
      <input type="button" onclick="netto()" value="oblicz netto">
      <p>Wynik to:<span id="howmuch" style="howmuch" style="color: white;padding-left: 0,5vw;"></span></p>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;