使用 javascript 计算税金

Question

所以我的问题是如何将函数 calculate() 添加到 HTML 代码中以使税收输入动态变化。比如我在收入栏写10'000，tax应该显示3'500，如果我在wealth栏加10'000，tax应该显示5'000

HTML:

var income = document.getElementById('income').value;
var wealth = document.getElementById('wealth').value;
var tax = document.getElementById('tax');

function calculate() {
  tax.innerHTML = (0.35 * income) + (0.25 * wealth);
}

<div class="row">
  <div class="col1">
    <label for="income">Income:</label>
  </div>
  <div class="col2">
    <input type="number" name="income" min="0" id="income" oninput="calculate()" required><br>
  </div>
</div>

<div class="row">
  <div class="col1">
    <label for="wealth">Wealth:</label>
  </div>
  <div class="col2">
    <input type="number" name="wealth" min="0" id="wealth" oninput="calculate()" required><br>
  </div>
</div>

<div class="row">
  <div class="col1">
    <label for="tax">Tax:</label>
  </div>
  <div class="col2">
    <input type="number" name="tax" min="0" id="tax" disabled>
  </div>
</div>

Answer 1

var incomeEl = document.getElementById('income')
var wealthEl = document.getElementById('wealth')
var taxEl    = document.getElementById('tax');

function calculate() {  
  var incomeTax = 0.35 * incomeEl.value;
  var wealthTax = 0.25 * wealthEl.value;
  var tax =  incomeTax + wealthTax;

  // round with 2 decimal places
  taxEl.value = Math.round(tax * 100) / 100;
}

incomeEl.addEventListener('input', calculate);
wealthEl.addEventListener('input', calculate);

<div class="row">
  <div class="col1">
    <label for="income">Income:</label>
  </div>
  <div class="col2">
    <input type="number" name="income" min="0" id="income" required><br>
  </div>
</div>

<div class="row">
  <div class="col1">
    <label for="wealth">Wealth:</label>
  </div>
  <div class="col2">
    <input type="number" name="wealth" min="0" id="wealth" required><br>
  </div>
</div>

<div class="row">
  <div class="col1">
    <label for="tax">Tax:</label>
  </div>
  <div class="col2">
    <input type="number" name="tax" min="0" id="tax" disabled>
  </div>
</div>

Answer 2

您需要使用 tax.value 而不是 tax.innerHTML 因为输入需要一个值。然后你需要 "refresh" 包含数字的变量，只需将它们放在一个函数中（它是运行字段中的每个输入更改，因此变量会自行刷新），类似这样的东西：

var tax = document.getElementById('tax');

function calculate() {
  var income = document.getElementById('income').value;
  var wealth = document.getElementById('wealth').value;
  tax.value = (0.35 * income) + (0.25 * wealth);
}

<div class="row">
  <div class="col1">
    <label for="income">Income:</label>
  </div>
  <div class="col2">
    <input type="number" name="income" min="0" id="income" oninput="calculate()" required><br>
  </div>
</div>

<div class="row">
  <div class="col1">
    <label for="wealth">Wealth:</label>
  </div>
  <div class="col2">
    <input type="number" name="wealth" min="0" id="wealth" oninput="calculate()" required><br>
  </div>
</div>

<div class="row">
  <div class="col1">
    <label for="tax">Tax:</label>
  </div>
  <div class="col2">
    <input type="number" name="tax" min="0" id="tax" disabled>
  </div>
</div>

Answer 3

you can use jquery

 <div class="row">
            <div class="col1">
                <label for="income">Income:</label>
            </div>
            <div class="col2">
                <input type="number" name="income" min="0" id="income"  required><br>
            </div>
        </div>



    <div class="row">
                <div class="col1">
                    <label for="wealth">Wealth:</label>
                </div>
                <div class="col2">
                    <input type="number" name="wealth" min="0" id="wealth"  required><br>
                </div>
            </div>

        <div class="row">
            <div class="col1">`
                <label for="tax">Tax:</label>
            </div>
            <div class="col2">
                <input type="number" name="tax" min="0" id="tax" disabled>
            </div>
        </div>

        <script>
            $(document).ready(function(){
                $("#income,#wealth").keyup(function(){
                    var tax = (($("#income").val())*0.35)+(($("#wealth").val())*0.25)
                    $("#tax").val(tax);
                });   

            });
        </script>

Answer 4

var incomeEl = document.getElementById('income')
var taxEl    = document.getElementById('tax');

function calculate() {  
  var incomeTax = incomeEl.value / 1.23;
  var tax =  incomeTax + wealthTax;

  // round with 2 decimal places
  taxEl.value = Math.round(tax * 100) / 100;
}

incomeEl.addEventListener('input', calculate);

<div class="row">
  <div class="col1">
    <label for="income">Income:</label>
  </div>
  <div class="col2">
    <input type="number" name="income" min="0" id="income" required><br>
  </div>
</div>

<div class="row">
  <div class="col1">
    <label for="tax">Tax:</label>
  </div>
  <div class="col2">
    <input type="number" name="tax" min="0" id="tax" disabled>
  </div>
</div>

使用 javascript 计算税金

Calculating tax using javascript

html

javascript

dom

function

tax