如何解决表单输入的值在JavaScript中为空
当我尝试检索在表单中输入的文本时,结果为空白。
document.getElementById("pass").addEventListener("keydown",function() {
document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown",function() {
document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;
function createCookie() {
window.alert(pass);
}
<div id="validation">
<form id="validationForm">
<fieldset>
<label for="pass">Password:</label><br />
<input type="text" id="pass" name="pass" /><br />
<label for="pinCode">4-digit PIN:</label><br />
<input type="text" id="pinCode" name="pinCode" /><br />
<input type="submit" value="Log In" onclick="createCookie()" />
<p id="rightorwrong"></p>
</fieldset>
</form>
</div>
<script type="text/javascript" src="password.js"></script>
当用户在表单中输入数据并按Submit时,将调用功能createCookie()
。我知道这行得通,因为如果我在函数中放入window.alert("test");
,它就可以工作。因此,问题出在pass
。
我尝试从value
中删除var pass = document.getElementById("pass").value;
,但这也不起作用。
我很困惑,因为这也是相对简单的代码。 (我使用的是Chrome 84。)
TIA
解决方法
您必须在函数内部使用值,例如:
document.getElementById("pass").addEventListener("keydown",function() {
document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown",function() {
document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});
function createCookie() {
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;
window.alert(pass);
window.alert(pinCode);
}
<div id = "validation">
<form id = "validationForm">
<fieldset>
<label for = "pass">Password:</label><br />
<input type = "text" id = "pass" name = "pass" /><br />
<label for = "pinCode">4-digit PIN:</label><br />
<input type = "text" id = "pinCode" name = "pinCode" /><br />
<input type = "submit" value="Log In" onclick = "createCookie()" />
<p id = "rightorwrong"></p>
</fieldset>
</form>
</div>
<script type = "text/javascript" src = "password.js"></script>
,
您应该在提交时获得价值,而不是在加载js文件时获得价值。您也可以使用onchange函数
var pass;
function createCookie() {
pass = document.getElementById("pass").value;
window.alert(pass);
}
,
javascript代码应该是这样
document.getElementById("pass").addEventListener("keydown",function () {
document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown",function () {
document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});
function createCookie() {
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;
alert(pass)
}
,
将变量放入函数中。与最初加载页面时一样,它们的值将为null,您无需为它们重新分配值。
因此,可以更改在keydown
上的值,或者设置在click
上的值。
function createCookie() {
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;
window.alert(pass);
}
检查代码段。
document.getElementById("pass").addEventListener("keydown",function() {
document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown",function() {
document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});
function createCookie() {
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;
window.alert(pass);
}
<div id="validation">
<form id="validationForm">
<fieldset>
<label for="pass">Password:</label><br />
<input type="text" id="pass" name="pass" /><br />
<label for="pinCode">4-digit PIN:</label><br />
<input type="text" id="pinCode" name="pinCode" /><br />
<input type="submit" value="Log In" onclick="createCookie()" />
<p id="rightorwrong"></p>
</fieldset>
</form>
</div>
<script type="text/javascript" src="password.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。