[英]How to change the display value of two text boxes through the input value of another text box using javascript?
[英]How to subtract two text box values and display in another text box using Javascript
我想查找在一个文本框中输入的两个数字之间的范围,并在另一个文本框中显示它。
我正在使用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代码:
<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>
为空字段添加默认值
尝试通过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>
Java脚本
var startMsisdn=parseInt(document.getElementById("startmsisdn").value) || 0;
var endMsisdn=parseInt(document.getElementById("endmsisdn").value) || 0;
您在这里有两个问题。 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的浏览器将其解析为十进制-它们可能默认使用八进制进行解析,如果输入零前缀值,则将导致意外结果。
工作实例
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>
通过将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);
}
在脚本中添加以下代码行即可正常工作。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.