嘿，我如何验证用户名和密码？它'；似乎javascript不'；我得不到价值观_Javascript_Html

嘿，我如何验证用户名和密码？它'；似乎javascript不'；我得不到价值观

javascript html

嘿，我如何验证用户名和密码？它'；似乎javascript不'；我得不到价值观,javascript,html,Javascript,Html,我想验证用户名和密码，如果用户名和密码正确，那么通过单击“回车”，用户将移动到另一个浏览器页面，但我无法获取用户写入JS的值（我将链接放在YouTube上，因为我不知道如何链接到另一个HTML页面）我很高兴能得到一些帮助。。谢谢 let form=document.getElementById（'login'）.innerHTML；让password=document.getElementById（'passwordbox'）.innerHTML.value；让Enter=docume

我想验证用户名和密码，如果用户名和密码正确，那么通过单击“回车”，用户将移动到另一个浏览器页面，但我无法获取用户写入JS的值（我将链接放在YouTube上，因为我不知道如何链接到另一个HTML页面）我很高兴能得到一些帮助。。谢谢

let form=document.getElementById（'login'）.innerHTML；
让password=document.getElementById（'passwordbox'）.innerHTML.value；
让Enter=document.getElementById（'Enter'）.innerHTML.value；
让user=document.getElementById（'userlogbox'）.innerHTML.value；
功能检查（表格）
{
如果（form.userid.value='abcd'）{
打开窗户https://www.youtube.com');
}否则{
警报（“您输入的用户名不匹配”）；
}
}
功能检查（表格）{
如果（form.password.value==“1234”）{
打开窗户https://www.youtube.com');
}否则{
警报（“您输入的密码不匹配”）；
}
}

正文{
保证金：0；
填充：0；
字体系列：无衬线；
背景：url（bg.jpg）不重复；
背景尺寸：封面；
}
.登录框{
宽度：280px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
}
.登录框h1{
浮动：左；
字体大小：40px；
边框底部：6px实心#4caf50；
边缘底部：50px；
填充：13px0；
}
.文本框{
宽度：100%；
溢出：隐藏；
字体大小：20px；
填充：8px0；
利润率：8px0；
边框底部：1px实心#4caf50；
}
.文本框一{
宽度：26px；
浮动：左；
文本对齐：居中；
}
.文本框输入{
边界：无；
大纲：无；
背景：无；
颜色：白色；
字号：18px；
宽度：80%；
浮动：左；
利润率：0.10px；
}
.btn{
宽度：100%；
背景：无；
边框：2px实心#4caf50；
颜色：白色；
填充物：5px；
字号：18px；
光标：指针；
边际：12px0；
}


数独

这段代码是一场灾难（许多打字错误），我不太理解，因为你没有检查密码……不过我会尽力帮助你，因为我正在学习javascript

const form = document.getElementById('login');
const userName = document.getElementById('userId');
const password = document.getElementById('userPassword');
const enterBtn = document.getElementById('enter');

const allowedUser = 'abcd';
const allowedPwd = 'something';

enterBtn.addEventListener('click', (event) => {
  event.preventDefault();
  if (!userName.value || !password.value) {
    alert('Please enter user & passowrd');
    return;
  }
  if (userName.value === allowedUser && password.value === allowedPwd) {
    window.open('https://www.youtube.com');
  } else {
    alert('the username you enterd not match');
  }
});

我删除了css文件（你的html和js充满了打字错误和其他不好的习惯）


数独
进入

我还在学习，所以这似乎是一场灾难，但谢谢问题是我不能使用我们还没有学会的东西-

addEventListener

所以我试着这样写，你帮了我很多，我很想听听你为什么认为它不起作用

HTML

请在您的b输入中删除parentesis。单击

您将在pageload上检索值，而不是在表单提交上检索值。为什么您有两个名为check的函数？我仍在学习，所以这看起来像是一场灾难，但是谢谢，我不能使用我们还没有学过的东西-

addEventListener

所以我试着这样写，你帮了我很多，我很想听听你为什么认为它不起作用，因为你应该删除你的Listener=>enterBtn.onclick上的“（）”如果我帮了你，请接受或投票支持我的答案。我为帮助而工作，我收到了a-1…我认为这是不对的，我没有将html中的验证链接到js中的函数。。。如何才能做到这一点？

   <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src='script.js' defer></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 id="userId" type="text" placeholder="username" name="userid">
      </div>

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

      <button id='enter' type="button" class="btn">
        Enter
      </button>
    </div>
  </form>
</body>

</html>

const form = document.getElementById('login');
const userName = document.getElementById('userId');
const password = document.getElementById('userPassword');
const enterBtn = document.getElementById('enter');

const allowedUser = 'abcd';
const allowedPwd = '1234';

enterBtn.onclick() = function(){

    if (!userName.value || !password.value) {
      prompt('Please enter user & password');
      return;
    }
    else if (password.value != '1234') {
      prompt('Please enter password');
      return;
    }
    else if (userName.value != 'abcd') {
      prompt('Please enter user');
      return;
    }
    else if (userName.value === allowedUser && password.value === allowedPwd) {
      window.location.href = "/Users/ormor/Desktop/Sudoku%20Project%204/Sudoku%20Project/main/";
    }
    else {
      prompt('the username you entered does not match');
      return;
    }
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <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='ws.css'>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>
  <div class="container">
    <div class='rows'>


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

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

      <button id='enter' type="button" class="btn btn-danger" onclick="validCheck()">Enter</button>
    </div>



  </div>
</div>
  </div>

  </form>
</body>
<script src='ws.js' defer></script>
</html>


html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 120px;
    background: url(33v2wnher48y.jpg) no-repeat;
    background-size: 30%;
    background-position: 35px, 35px, 35px, 35px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}