CODEWITHSUNDEEP
javascript
mafortis
mafortis

Reputation: 7138

JavaScript calculation won't print results

I have this code

$(function() {
  if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
    var price = document.getElementById('price').value;
    var deposite = document.getElementById('dp').value;
    document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
  }
});

and this fields in my form

<div class="col-md-3">
    <label for="price">Price *</label>
    <input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
    <label for="dp">DP *</label>
    <input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
    <label for="remained">Remained *</label>
    <input type="number" class="form-control" id="remained" name="remained">
</div>

The logic is simple:

  1. get price
  2. get DP
  3. print minus results in remained input

but somehow it doesn't print anything in remained input.

Any idea what I did wrong?

Upvotes: 0

Views: 56

Answers (4)

Von Uyvico
Von Uyvico

Reputation: 47

The js code runs on the initial loading of webpage. The js code must be called by an onclick or an onkeyup

Upvotes: 0

Mohamed Elrashid
Mohamed Elrashid

Reputation: 8619

  • the calculation is right but it doen one time on page ready event

  • add manual button to tell javascrip when to calculate the value

  • alos add event listener to automatically call on change

    <div class="col-md-3">
        <label for="price">Price *</label>
        <input type="number" class="form-control" id="price" name="price">
    </div>
    <div class="col-md-3">
        <label for="dp">DP *</label>
        <input type="number" class="form-control" id="dp" name="dp">
    </div>
    <div class="col-md-3">
        <label for="remained">Remained *</label>
        <input type="number" class="form-control" id="remained" name="remained">
    </div>

    <button type="button"
    onclick="cal()">
    cal
    </button>

    $(function() {
      document.getElementById("price").addEventListener("change",cal);
      document.getElementById("dp").addEventListener("change",cal);
    });


    function cal(){
      if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
        var price = document.getElementById('price').value;
        var deposite = document.getElementById('dp').value;
        document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
      }
    }

Upvotes: 0

Micha
Micha

Reputation: 924

I think you should put the calculation to ready function because it is asynchronous

 $( document ).ready(function() {
     console.log( "ready!" );
     // calculation
  });

Or better use angular ... Instead of jQuery

Upvotes: 0

Mamun
Mamun

Reputation: 68933

Your code is executing on page load and the value of the inputs are empty.

You should execute your code on some event like the following way:

$(function() {
  $('#dp, #price').on('input', function(){    
    if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
      var price = document.getElementById('price').value;
      var deposite = document.getElementById('dp').value;
      document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
    <label for="price">Price *</label>
    <input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
    <label for="dp">DP *</label>
    <input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
    <label for="remained">Remained *</label>
    <input type="number" class="form-control" id="remained" name="remained">
</div>

Upvotes: 2

Related Questions