如何使用Javascript减去两个文本框值并在另一个文本框中显示

Question

I want to fins the range between two number entered in a textbox and display it in another text box.

I am using the event onBlur.

Initially i got NaN in the result textbox.

Later I used ParseInt now no value is getting displayed.

My code :

<script type="text/javascript">
function countRows(){

    var rows=document.getElementById("rows");
    var startMsisdn=parseInt(document.getElementByName("startmsisdn").value);
    var endMsisdn=parseInt(document.getElementByName("endmsisdn").value);
    rows.value=endMsisdn-startMsisdn;

}

</script>

HTML CODE :

                <div class="col-md-4">
                    <label>MSISDN Start Range </label> <input class="form-control"
                        type="text" name="startmsisdn"
                        placeholder="MSISDN Starting Range" required>
                </div>
                <div class="col-md-4">
                    <label>MSISDN End Range </label> <input class="form-control"
                        type="text" name="endmsisdn" placeholder="MSISDN Ending Range"
                        required>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-4">
                    <label>IMSI Start Range </label> <input class="form-control"
                        type="text" name="startimsi" placeholder="IMSI Starting Range"
                        required>
                </div>
                <div class="col-md-4">
                    <label>IMSI End Range </label> <input class="form-control"
                        type="text" name="endimsi" placeholder="IMSI Ending Range"
                        required onblur="countRows()">
                </div>
                <div class="col-md-4">
                    <label>No of rows </label> <input class="form-control"
                        type="text" name="rows"  id="rows"
                        required>
                </div>

Answer 1

Add default value for empty field

Try to get element by id for input field;

like this

Html

div class="col-md-4">
<label>IMSI Start Range </label> 
<input class="form-control"
   type="text" id="startimsi" name="startimsi" placeholder="IMSI Starting Range"
   required>
</div>
<div class="col-md-4">
   <label>IMSI End Range </label> 
   <input class="form-control"
      type="text" id="endimsi" name="endimsi" placeholder="IMSI Ending Range"
      required onblur="countRows()">
</div>

Javascript

var startMsisdn=parseInt(document.getElementById("startmsisdn").value) || 0;
var endMsisdn=parseInt(document.getElementById("endmsisdn").value) || 0;

Answer 2

You have two issues here. parseInt may return NaN , so any value you add to it will also always return NaN . The second issue is there is no getElementByName method (singular). It's getElementsByName which returns an array-like object:

function countRows(){

    var rows=document.getElementById("rows");
    var startMsisdn=parseInt(document.getElementsByName("startmsisdn")[0].value, 10) || 0;
    var endMsisdn=parseInt(document.getElementsByName("endmsisdn")[0].value, 10) || 0;
    rows.value=endMsisdn-startMsisdn;

}

You may notice that I added an extra parameter to your parseInt too. This is to force non-ES5 compliant browsers to parse as decimal - they may default to using octal for parsing which will result in unexpected results if a zero-prefixed value is entered.

Working Example

 function countRows(){ var rows=document.getElementById("rows"); var startMsisdn=parseInt(document.getElementsByName("startmsisdn")[0].value, 10) || 0; var endMsisdn=parseInt(document.getElementsByName("endmsisdn")[0].value, 10) || 0; rows.value=endMsisdn-startMsisdn; } 

 <div class="col-md-4"> <label>MSISDN Start Range </label> <input class="form-control" type="text" name="startmsisdn" placeholder="MSISDN Starting Range" required> </div> <div class="col-md-4"> <label>MSISDN End Range </label> <input class="form-control" type="text" name="endmsisdn" placeholder="MSISDN Ending Range" required> </div> <br> <div class="row"> <div class="col-md-4"> <label>IMSI Start Range </label> <input class="form-control" type="text" name="startimsi" placeholder="IMSI Starting Range" required> </div> <div class="col-md-4"> <label>IMSI End Range </label> <input class="form-control" type="text" name="endimsi" placeholder="IMSI Ending Range" required onblur="countRows()"> </div> <div class="col-md-4"> <label>No of rows </label> <input class="form-control" type="text" name="rows" id="rows" required> </div> </div> 

Answer 3

try this by replacing NaN with 0 ..

function countRows(){
    var rows = document.getElementById("rows"); 
    var startMsisdn=document.getElementById("startmsisdn").value;
    if(startMsisdn =='' ){ startMsisdn =0;}
    var endMsisdn=document.getElementById("endmsisdn").value;
    if(endMsisdn =='' ){ endMsisdn =0;}
    rows.value= parseInt(endMsisdn) - parseInt(startMsisdn);
}

HERE is the FIDDLE

Answer 4

Add These line of code in script its will work fine.

function countRows() {

            var rows = document.getElementById("rows");
            var startMsisdn = parseInt(document.getElementsByName("startmsisdn")[0].value);
            var endMsisdn = parseInt(document.getElementsByName("endmsisdn")[0].value);
            rows.value = endMsisdn - startMsisdn;

        }