javascript - 为什么我的 check() 函数在 JavaScript 中不起作用?请有人检查我的代码

标签 javascript html

基本上,我设计了一个小登录页面,但我的检查功能无法正常工作。

我创建了 div 元素和一个函数来通过 Javascript 中的 Id 检查它。但它无法正常工作,当该函数应该检查“用户和通行证”中的值时,它会说“无效的用户名或密码”

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

<head>
<header id="header">Please Login Here</header>
<meta charset="utf-8">
<title id="title">Login</title>
</head>
<body>

<form>
    <div id="user">
        <input type="text" name="user" placeholder="Username">
    </div>

    <div id="pass">
        <input type="text" name="pass" placeholder="Password">
    </div>
<script type="text/javascript">
    function check() {
        if (document.getElementById("user") == "Guy" && (document.getElementById("pass")) == "123") {
            alert("Welcome!")
        } else {
            alert("Invalid username or password!")
        }
    }
    </script>
    <div id="login">
        <button type="button" name="button" onclick="check()">Login!</button>
    </div>
</body>

预期结果是“欢迎!”当输入正确的内容时,会出现警告框: 用户名: 盖伊 密码:123

最佳答案

您需要在输入元素上使用.value - 因此请使用querySelector。另请检查您的括号嵌套:

function check() {
  if (document.querySelector("#user > input").value == "Guy" && document.querySelector("#pass > input").value == "123") {
    alert("Welcome!")
  } else {
    alert("Invalid username or password!")
  }
}
<div id="user">
  <input type="text" name="user" placeholder="Username">
</div>

<div id="pass">
  <input type="text" name="pass" placeholder="Password">
</div>

<div id="login">
  <button type="button" name="button" onclick="check()">Login!</button>
</div>

关于javascript - 为什么我的 check() 函数在 JavaScript 中不起作用?请有人检查我的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56813592/

相关文章:

javascript - 具有单一数据的 Highcharts 面积图,不渲染

javascript - 悬停在图片上时显示说明

javascript - MVC Razor 共享布局页面渲染问题

html - 防止HTML代码被窃取

javascript - 全局 Jest SpyOn 函数不调用原始函数

javascript - 通过 mongo shell 将 Date() 插入到 Mongodb

javascript - freecodecamp 不接受 JS 代码

javascript - 焦点离开弹出页面到父页面

javascript - 在 url 上寻找 #

javascript - 带条件运算符的内联 If-Else 的双假