Question

我希望在文本框中输入两个数字之间的范围，并将其显示在另一个文本框中。

我正在使用事件onBlur。

最初我在结果文本框中输入了NaN。

后来我使用了ParseInt，现在没有显示任何值。

我的代码：

<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

添加空字段的默认值

尝试通过id获取输入字段的元素;

像这样

<强> 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

这里有两个问题。 parseInt可能会返回NaN，因此您添加到其中的任何值也将始终返回NaN。第二个问题是没有getElementByName方法（单数）。它的getElementsByName返回一个类似数组的对象：

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;

}

您可能会注意到我在parseInt中添加了额外的参数。这是为了强制非ES5兼容的浏览器解析为十进制 - 它们可能默认使用八进制进行解析，如果输入零前缀值，将导致意外结果。

工作示例

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

尝试将NaN替换为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

在脚本中添加这些代码行，它可以正常工作。

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;

        }

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

4 个答案: