问题遇到的现象和发生背景
问题相关代码，请勿粘贴截图
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用户登录</title>
<script type="text/javascript" src="login.js"></script>
<link rel="stylesheet" href="css/index.css" />
<style type="text/css">
body{
background: url("img/beijing.jpg") no-repeat center center fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="login">
<h2>用户登录</h2>
<div class="login_box">
<input type="text" required /><label class="label_input">用户名</label><input type="text" id="username" class="text_field"/>
</div>
<div class="login_box">
<input type="password" required="required" /><label class="label_input">密码</label><input type="text" id="password" class="text_field"/>
</div>
<a id="login_control">
<input type="button" id="btn_login" value="登录" onClick="login();"/>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</div>
</body>
</html>
```javascript
function login() {
var username = document.getElementById("username");
var pass = document.getElementById("password");
if (username.value == "") {
alert("请输入用户名");
} else if (pass.value == "") {
alert("请输入密码");
} else if(username.value == "郭宇" && pass.value == "20090130410") {
window.location.href="第一个页面.html";
}else{
alert("请输入正确的用户和密码！")
}
}
