在javascript的输入数字类型字段中输入值时如何显示输入文本字段？
[英]How to show a input text field when a value is entered in input number type field in javascript?
问题描述
I m working on a form which have a field called amount field on which when a number is greater than 2000 than a pan card field is to be shown automatically as soon as the value is entered , I tried using javascript but i end up by this code below :
我正在处理一个表单，它有一个名为金额字段的字段，当一个数字大于 2000 时，只要输入值，就会自动显示泛卡字段，我尝试使用 javascript，但我最终是这样的下面的代码：
var amnt=document.getElementById("amount").value; var pandiv=document.getElementById("pancarddiv"); function showPanfield(){ if(amnt.value >= 2000){ pandiv.style.display="block"; } else{ pandiv.style.display="none"; } } <!doctype html> <html lang="en"> <head> <title>Donation Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> <style> div#pancarddiv { display: none; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <form action="" method="POST"> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Full Name*</label> <input type="text" class="form-control" id="name" name="fname" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Postal Address*</label> <textarea class="form-control" rows="4" id="Address" name="address" required></textarea> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Mobile No.*</label> <input type="number" class="form-control" id="mobileno" name="mobile" required/> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Email Id*</label> <input type="email" class="form-control" id="email" name="email" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Amount (Rs.)*</label> <input oninput="showPanfield()" type="number" class="form-control" id="amount" name="amount" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group" id="pancarddiv"> <label>Pan Card No*</label> <input type="text" class="form-control" id="panid" name="panid"/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div> </div> </body> </html>
I hope if some one could help me to solve it that where im lagging.我希望如果有人可以帮助我解决我落后的问题。
2 个解决方案
解决方案1
0 已采纳 2020-03-25 10:10:33
The problem is because you get the value of amount field once outside the function.问题是因为您在函数之外获得了 amount 字段的值。 You just need to change your amnt variable to be the amount element, not its value:您只需要将amnt变量更改为数量元素，而不是其值：
var amnt=document.getElementById("amount"); var pandiv=document.getElementById("pancarddiv"); function showPanfield(){ if(amnt.value >= 2000){ pandiv.style.display="block"; } else{ pandiv.style.display="none"; } } <!doctype html> <html lang="en"> <head> <title>Donation Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> <style> div#pancarddiv { display: none; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <form action="" method="POST"> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Full Name*</label> <input type="text" class="form-control" id="name" name="fname" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Postal Address*</label> <textarea class="form-control" rows="4" id="Address" name="address" required></textarea> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Mobile No.*</label> <input type="number" class="form-control" id="mobileno" name="mobile" required/> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Email Id*</label> <input type="email" class="form-control" id="email" name="email" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Amount (Rs.)*</label> <input oninput="showPanfield()" type="number" class="form-control" id="amount" name="amount" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group" id="pancarddiv"> <label>Pan Card No*</label> <input type="text" class="form-control" id="panid" name="panid"/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div> </div> </body> </html>
解决方案2
0 2020-03-25 10:11:04
Two issues on this code这段代码的两个问题
document.getElementById("amount").valuereturns a string so if you expect to get a number you should cast it as a number (eg using the unary + operator )document.getElementById("amount").value返回一个字符串，因此如果您希望得到一个数字，则应将其转换为数字（例如使用一元 + 运算符）In the
ifstatement you're trying a to still access to a not-existantvalueproperty ofamntvariable which is a string and not an object在if语句中，您尝试仍然访问amnt变量的不存在value属性，该属性是字符串而不是对象
So to solve both the issues change the statement into因此，要解决这两个问题，请将语句更改为
if (+amnt >= 2000) {
...
}
As a side note if you use an inline event handler you should not use parenthesys since you are assigning a function oninput="showPanfield"作为旁注，如果您使用内联事件处理程序，则不应使用括号，因为您正在分配一个函数oninput="showPanfield"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.