html + java script ! need help to understand why am getting (invalid username or password)

am trying to do a homework in web dev and there is a part i need help with because it should work but i have no idea why its not
the username in the test is doc1 and the password is 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>

it should say after entering doc1 and pass1 (login success!)
what i tried is changing the var DU and var DP and even the if statement from document.getElementById to form.element and adding var form = document.getElementById
but nothing worked