嘿，我该如何验证用户名和密码？似乎javascript无法获取值

由 发布于

我想验证用户名和密码，如果用户名和密码正确，那么单击“ Enter”，用户将移动到另一个浏览器页面，但是我无法接受用户写给JS的值（我放置了一个链接到YouTube，因为我不知道如何链接到另一个HTML页面） 我会很高兴为您提供帮助。 谢谢！

的HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css.css'>
    <script src='script.js'></script>
  </head>
  <body>


<form= id='login' class='login'>    
<div 

id='userlogbox' class="login-box">
  <h1>Sudoku</h1>
  <div class="textbox">
    <i class="fas fa-user"></i>
    <input type="text" placeholder="Username" name= "userid">
  </div>

  <div id='passwordbox' class="textbox">
    <i class="fas fa-lock"></i>
    <input type="password" placeholder="Password" name= "password">
  </div>

  <button><input id='Enter' type="button" class="btn" value="Enter" onclick="check(this.form)" value="Enter"/>
  </button></div></form>
  </body>
</html>

的JavaScript

let form = document.getElementById('login').innerHTML;
let password = document.getElementById('passtextbox').innerHTML.value;
let Enter = document.getElementById('Enter').innerHTML.value;
let user = document.getElementById('userlogbox').innerHTML.value;


function check (form)


{
if (form.userid.value == 'abcd')
{
 window.open ('https://www.youtube.com');
}
else {
    alert("the username you enterd not match");
}
}

function check (form)
{
if (form.password.value == '1234')
{
 window.open ('https://www.youtube.com');
}
else {
    alert("the password you enterd not match");
}
}

的CSS

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(bg.jpg) no-repeat;
  background-size: cover;
}
.login-box{
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
}
.login-box h1{
  float: left;
  font-size: 40px;
  border-bottom: 6px solid #4caf50;
  margin-bottom: 50px;
  padding: 13px 0;
}
.textbox{
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  padding: 8px 0;
  margin: 8px 0;
  border-bottom: 1px solid #4caf50;
}
.textbox i{
  width: 26px;
  float: left;
  text-align: center;
}
.textbox input{
  border: none;
  outline: none;
  background: none;
  color: white;
  font-size: 18px;
  width: 80%;
  float: left;
  margin: 0 10px;
}
.btn{
  width: 100%;
  background: none;
  border: 2px solid #4caf50;
  color: white;
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
  margin: 12px 0;
}