Calculating tax using javascript

Question

So my question is how do I add the function calculate() to the HTML code for the tax input to dynamically change. For example, if I'd write in 10'000 in the income field, the tax should show 3'500, and if I additionally added 10'000 in the wealth field, the tax should show 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>

yunzen · Accepted Answer · 2018-10-18T13:01:25.577

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>

Thank you so much! :) May I just ask why you multiply by 100 and then divide by 100? — Ztoric, Oct 18 '18 at 12:44

score 0 · Answer 2 · answered Oct 18 '18 at 12:48

You need to use tax.value instead of tax.innerHTML since input requires a value inside. Then you need to "refresh" variables that contain numbers simply by placing them inside a function (it's running on every input change in field, so variables will refresh themselves), something like that:

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>

Oh, sorry. I didn't notice that somebody added an answer while I was typing — bvrtsz, Oct 18 '18 at 12:52

score 0 · Answer 3 · answered Oct 18 '18 at 13:25

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>

score 0 · Answer 4 · answered Apr 07 '22 at 13:42

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>

Calculating tax using javascript

4 Answers4