CODEWITHSUNDEEP
javascripthtmlfunctiondom
Ztoric
Ztoric

Reputation: 21

Calculating tax using javascript

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>

Upvotes: 0

Views: 14466

Answers (4)

miko
miko

Reputation: 11

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>

Upvotes: 0

roni naruka
roni naruka

Reputation: 79

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>

Upvotes: 0

yunzen
yunzen

Reputation: 33439

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>

Upvotes: 2

bvrtsz
bvrtsz

Reputation: 46

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>

Upvotes: 0

Related Questions