html - Calculating tax using javascript - Stack Overflow

admin管理员组

文章数量:1410724

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>

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>

• javascript
• html
• function
• dom

Share Improve this question Follow edited Jun 13, 2024 at 13:58 aynber 23k99 gold badges5454 silver badges6868 bronze badges asked Oct 18, 2018 at 12:29 ZtoricZtoric 2111 gold badge11 silver badge33 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>

本文标签： htmlCalculating tax using javascriptStack Overflow