javascript清空输入框的值问题的解决
这个问题要记录下,请教了对面的vue大哥才解决。需求:编写一个模拟用户登录的功能,正确的账号密码均为123,页面需要两个 input 节点和一个 button 节点。要求:点击 button 时需要判断用户输入的账号密码是否为 123 ,并给予相应的提示(方式不限)如果账号或密码错误,将密码所在的 input 节点中的内容清空代码:<!DOCTYPE html><...
·
这个问题要记录下,请教了对面的vue大哥才解决。
需求:
- 编写一个模拟用户登录的功能,正确的账号密码均为123,页面需要两个 input 节点和一个 button 节点。要求:
- 点击 button 时需要判断用户输入的账号密码是否为 123 ,并给予相应的提示(方式不限)
- 如果账号或密码错误,将密码所在的 input 节点中的内容清空
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom练习</title>
<style>
button {
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<script type="text/javascript">
function login() {
var name = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (name == "123" && password == "123") {
alert("登录成功!");
} else {
document.getElementById("password").value = '';
}
}
</script>
<p>
<label for="username">账号:</label>
<input type="text" name="username" id="username">
</p>
<p class="line">
<label for="username">密码:</label>
<input type="text" name="password" id="password">
</p>
<button id="login" onclick="login()">登录</button>
</body>
</html>
做这个程序时出现了一个问题,就是input的值无论怎么清空,都留在了浏览器中。请教大哥后才知道:当值赋给password的时候,操作的不是input.value这个值,而是password这个变量的值,导致网页浏览器中元素没有改变。
后续改进:
function login1(){
var name = document.getElementById("username");
var password = document.getElementById("password");
if(name.value == "123" && password.value == "123"){
alert("登录成功!");
} else {
password.value = "";
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)