arithmatic using javascript

Question

i'd like to ask how to do arithmatic using javascript Here i have some input value

<div class="form-group">
    <label for="exampleInputTotalBayar">Total Bayar</label>
    <input type="text" class="form-control" id="inputTotalBayar" placeholder="Total Bayar" name="totalBayar" value="{{ $peminjaman->totalBayar }}">
</div>
<div class="form-group">
    <label for="exampleInputJumlahBayar">Telah Membayar</label>
    <input type="text" class="form-control" id="inputJumlahBayar" onchange="" placeholder="Jumlah Bayar" name="jumlahBayar" value="{{ $peminjaman->jml_bayar }}">
</div>

I have this input too

<div class="form-group">
    <label for="exampleInputDenda">Denda</label>
    <input type="text" class="form-control" id="exampleInputDenda" placeholder="Denda" name="denda" value="{{ $peminjaman->denda }}">
</div>

And this

<div class="form-group">
    <label for="exampleInputBayarKembali">Jumlah Bayar Pengembalian</label>
    <input type="text" class="form-control" id="inputBayarKembali" onchange="" placeholder="Bayar Pengembalian" name="bayarPengembalian">
</div>

And using javascript, the answer from arithmatic operation will be shown here

<p>Bayar Pengembalian: <div id="bayar" name="bayar"></div></p>
<p>Sisa: <div id="sisa" name="sisa"></div></p>

For Bayar Pengembalian, it work just fine. But when im trying to calculate Sisa, the answer wont be shown. Here is my javascript

$("#exampleInputDenda").change(function() {
        var bayar = parseInt("0");
        var totalBayar = parseInt($("#inputTotalBayar").val());
        var jumlahBayar = parseInt($("#inputJumlahBayar").val());
        var denda = parseInt($("#exampleInputDenda").val());
        bayar = bayar + denda + totalBayar - jumlahBayar;
        $("#bayar").html(bayar);
    });

    $("#inputBayarKembali").change(function() {
        var sisa = parseInt("0");
        var bayar = $("#bayar").val();
        sisa = sisa + $("#inputBayarKembali").val()-bayar;
        $("#sisa").html(sisa);
    });

would you help me with my problem? I'm just in the middle of studying javascript and laravel, so i really need your help... thanks before

what errors do you get (e.g console output)

john Smith
– john Smith

2014-09-14 11:43:53 +00:00
Commented Sep 14, 2014 at 11:43 — john Smith
– john Smith, Commented Sep 14, 2014 at 11:43
why dont you use parseInt() for second changehandler ?

john Smith
– john Smith

2014-09-14 11:44:56 +00:00
Commented Sep 14, 2014 at 11:44 — john Smith
– john Smith, Commented Sep 14, 2014 at 11:44
it cant reach the value for bayar

user3796075
– user3796075

2014-09-14 11:50:40 +00:00
Commented Sep 14, 2014 at 11:50 — user3796075
– user3796075, Commented Sep 14, 2014 at 11:50

RobbieP · Accepted Answer · 2014-09-14 11:45:18Z

2

You need to parseInt() around the input values:

$("#inputBayarKembali").change(function() {
    var sisa = parseInt("0");
    var bayar = parseInt($("#bayar").text());
    sisa = sisa + parseInt($("#inputBayarKembali").val())-bayar;
    $("#sisa").html(sisa);
});

answered Sep 14, 2014 at 11:45

RobbieP

6984 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3796075 Over a year ago

Oh thank you... can i ask you something? why we need .text() when identifying var bayar?

RobbieP Over a year ago

Because .val() is for returning the value of inputs. And .text() or .html() returns the content of other elements

Collectives™ on Stack Overflow

arithmatic using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related