html - 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 ine 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 ine = document.getElementById('ine').value;
var wealth = document.getElementById('wealth').value;
var tax = document.getElementById('tax');

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

<div class="row">
  <div class="col1">
    <label for="ine">Ine:</label>
  </div>
  <div class="col2">
    <input type="number" name="ine" min="0" id="ine" 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>

HTML:

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

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

<div class="row">
  <div class="col1">
    <label for="ine">Ine:</label>
  </div>
  <div class="col2">
    <input type="number" name="ine" min="0" id="ine" 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>

Share Improve this question edited Jun 13, 2024 at 13:58 aynber 23k9 gold badges54 silver badges68 bronze badges asked Oct 18, 2018 at 12:29 Ztoric 211 gold badge1 silver badge3 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

var ineEl = document.getElementById('ine')
var wealthEl = document.getElementById('wealth')
var taxEl    = document.getElementById('tax');

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

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

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

<div class="row">
  <div class="col1">
    <label for="ine">Ine:</label>
  </div>
  <div class="col2">
    <input type="number" name="ine" min="0" id="ine" 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>

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 ine = document.getElementById('ine').value;
  var wealth = document.getElementById('wealth').value;
  tax.value = (0.35 * ine) + (0.25 * wealth);
}

<div class="row">
  <div class="col1">
    <label for="ine">Ine:</label>
  </div>
  <div class="col2">
    <input type="number" name="ine" min="0" id="ine" 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>

you can use jquery

 <div class="row">
            <div class="col1">
                <label for="ine">Ine:</label>
            </div>
            <div class="col2">
                <input type="number" name="ine" min="0" id="ine"  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(){
                $("#ine,#wealth").keyup(function(){
                    var tax = (($("#ine").val())*0.35)+(($("#wealth").val())*0.25)
                    $("#tax").val(tax);
                });   

            });
        </script>

var ineEl = document.getElementById('ine')
var taxEl    = document.getElementById('tax');

function calculate() {  
  var ineTax = ineEl.value / 1.23;
  var tax =  ineTax + wealthTax;

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

ineEl.addEventListener('input', calculate);

<div class="row">
  <div class="col1">
    <label for="ine">Ine:</label>
  </div>
  <div class="col2">
    <input type="number" name="ine" min="0" id="ine" 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Calculating tax using javascript - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)