select option display input block and enter value that count and display another inptut value auto

Question

I have a HTML form that is for payment status in my panel. In this form if i select payment status Advance Paid Then displays The another input box that i can enter for the advanced paid price. There is another input box is available that is remaining price if i entered the value of advance paid the remaining price should be display the remaining value using java script. If I choose payment status is Null then display total price in remaining price input box and if i choose Paid then display 0 in remaining price input box...all things run good ...but only one thing is not working that is if i enter the value of advance price the remaining price is not displyed. Here is my HTML Code

    <div class="col-md-6">
        <div class="form-group">
            <label>Final Total</label>
            <input type="text" value="100" name="total" id="Ftotal" class="form-control" >
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group">
            <label for="paymentstatus">Payment Status</label>
            <select class="form-control" name="paymentstatus" style="height: 40px;" onchange="yesnoCheck(this);">
                <option value=""> ---Select Payment Status---</option>
                <option>Advance</option>
                <option>Null</option>
                <option>Paid</option>
            </select>
        </div>
    </div>

    <div class="col-md-6" id="ifYes" style="display: none;">
        <div class="form-group">
            <label for="advancepaid">Advanced Paid</label>
            <input type="text" name="advancedPiad" id="advancedPiad" onKeyUp="remaining()"  class="form-control">
        </div>
    </div> 

    <div class="col-md-6">
        <div class="form-group">
            <label for="remainingammount">Remaining Ammount</label>
            <input type="text" name="remaining" id="remaining" class="form-control remaining" >
        </div>
    </div>

this is my javascript

function yesnoCheck(that) {
        if (that.value == "Advance") {

            document.getElementById("ifYes").style.display = "block";
        } else {
            document.getElementById("ifYes").style.display = "none";
        }
        if (that.value == "Null") {
           a = Number(document.getElementById('Ftotal').value);
          document.getElementById('remaining').value = a;
        }
         if (that.value == "Paid") {
           a = 0;
          document.getElementById('remaining').value = a;
        }

    }

function remaining()
{
    a = Number(document.getElementById('Ftotal').value);
    b = Number(document.getElementById('advancedPiad').value);
    c = a - b;

    document.getElementsByClassName("remaining").value = c;
}

Answer 1

Try to use js parseInt() method to convert it into integer

 function remaining()
 {

 a=parseInt(document.getElementById('Ftotal').value);


b = parseInt(document.getElementById('advancedPiad').value);
c = a - b;

document.getElementsByClassName("remaining").value = c;
}

Answer 2

Try

document.getElementsByClassName("remaining")[0].value = c;

document.getElementsByClassName gives you the array of the elements with the class name specified. In your case just set the value of first element.