源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
请输入用户名:
<input type="text" class="userName">
请输入密码:
<input type="password" class="userPwd">
<button class="login">确认登录</button>
<script>
// 获取用户名和密码
var userName = document.getElementsByClassName("userName")[0]
var userPwd = document.getElementsByClassName("userPwd")[0]
// 获取登录按钮
var login = document.getElementsByClassName("login")[0];
// 给登录按钮绑定点击事件
login.onclick = function(){
// 假定我们设置的用户名分别为:user和123
if(userName=="user" && userPwd=="123"){
location.href = "登录成功页面.html";
}else{
alert("登录失败")
}
console.log(userName,userPwd)
}
</script>
</body>
</html>
问题描述
该登录功能无法实现,经过测试发现,问题来源于无法获取到输入框输入的数值。
问题分析
页面一打开,变量userName和变量userPwd就开始获取输入框中的用户名和密码,但是此时两个输入框中都没有输入数据,故userName和userPwd值都为空。
虽然后来又在输入框中输入数据,但是没有把输入框中的数据再次赋值给userName和userPwd,故userName和userPwd的值仍保持为空
解决办法
将userName和userPwd获取输入框中的值的那两行代码放到按钮的点击事件中执行即可。
即当用户点击登录按钮之后,userName和userPwd再获取输入框中的值,再然后判断输入的账号密码是否正确。
修改后代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
请输入用户名:
<input type="text" class="userName">
请输入密码:
<input type="password" class="userPwd">
<button class="login">确认登录</button>
<script>
// 获取登录按钮
var login = document.getElementsByClassName("login")[0];
// 给登录按钮绑定点击事件
login.onclick = function(){
// 获取用户名和密码(注:获取到的用户名和密码都是字符串类型。)
var userName = document.getElementsByClassName("userName")[0].value
var userPwd = document.getElementsByClassName("userPwd")[0].value
// 假定我们设置的用户名分别为:user和123
if(userName=="user" && userPwd=="123"){
location.href = "登录成功页面.html"; //这里填写你需要登录成功所跳转的页面的路径
}else{
alert("登录失败")
}
console.log(userName,userPwd)
}
</script>
</body>
</html>