我试着在Web Dev中做作业(job),有一个部分我需要帮助,因为它应该可以工作,但我不知道为什么它不能 测试中的用户名为doc1,密码为pass1

function docauth(event)
{
    var DU = "doc1";
    var DP = "pass1";
    if(document.getElementById("docuser") === DU && 
       document.getElementById("docpass") === DP)
    {
        alert("login success!");
    } 
    else 
    {             
        alert("invalid username or password");
    }
}
<head>
    <title>Doctor page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <fieldset>
        <legend>doctor login</legend>
        <form id="docLOG" onsubmit="docauth(event)">
        <label for="docuser">Username:</label>
        <input type="text" id="docuser" name="docuser" required><br><br>
        <label for="docpass">Password:</label>
        <input type="text" id="docpass" name="docpass" required><br><br>
        <input type="submit" value="Login">
        </form>
    </fieldset> 
</body>
</html>

输入doc1和pass1后应该说(登录成功!) 我try 将var DU和var DP,甚至if语句从document. getElementById改为form. element,并添加var form = document. getElementById 但没有任何工作

推荐答案

以下是您需要做的:

      if(document.getElementById("docuser").value === DU && 
           document.getElementById("docpass").value === DP)

它不起作用的原因是它比较元素,而不是整个元素的文本.但是如果你把.value放在document.getElementById之后,它会工作,因为现在它比较了用户在输入中输入的内容.

<!DOCTYPE html>

<html>
    <head>
        <title>Doctor page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <fieldset>
            <legend>doctor login</legend>
            <form id="docLOG" onsubmit="docauth(event)">
            <label for="docuser">Username:</label>
            <input type="text" id="docuser" name="docuser" required><br><br>
            <label for="docpass">Password:</label>
            <input type="text" id="docpass" name="docpass" required><br><br>
            <input type="submit" value="Login">
            </form>
        </fieldset> 
      <script>
        function docauth(event)
        {
            var DU = "doc1";
            var DP = "pass1";
            if(document.getElementById("docuser").value === DU && 
               document.getElementById("docpass").value === DP)
            {
                alert("login success!");
            } 
            else 
            {             
                alert("invalid username or password");
            }
        }

    </script>
    </body>
</html>

Javascript相关问答推荐

RxJS setTimeout操作符等效

如何使用Echart 5.5.0创建箱形图

基于变量切换隐藏文本

无法在nextjs应用程序中通过id从mongoDB删除'

扫描qr code后出错whatter—web.js

空的结果抓取网站与Fetch和Cheerio

如何根据当前打开的BottomTab Screeb动态加载React组件?

用于编辑CSS样式的Java脚本

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

在HTML语言中调用外部JavaScript文件中的函数

JQuery Click事件不适用于动态创建的按钮

React.Development.js和未捕获的ReferenceError:未定义useState

是否可以在Photoshop CC中zoom 路径项?

自定义确认组件未在vue.js的v菜单内打开

是否可以将异步调用与useState(UnctionName)一起使用

用于测试其方法和构造函数的导出/导入类

bootstrap S JS赢得了REACT中的函数/加载

在高位图中显示每个y轴系列的多个值

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)