Solution 1 :

Thye need to be strings passed in:

function validateLogin() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    return false;

Problem :

I am getting the “Cannot find property ‘value’ of null” error on line 2 of my JavaScript code. Whether or not I input strings on my text-box, I get this error. Any way I can go about fixing this?


<!DOCTYPE html>

        <title>Login Screen</title>
        <link rel="stylesheet" type="text/css" href="login.css"/>
        <script src="login.js"></script>

        <div id="container">
            <h1 onclick="loginDetails()">Login</h1>
            <form onsubmit="return validateLogin()">
                <label for="username" class="label-1">Username</label><br>
                <input type="text" id="username" class="text-box"><br>
                <label for="password" class="label-2">Password</label><br>
                <input type="text" id="password" class="text-box"><br>
                <button type="submit" id="login" class="button">Sign In</button>


function validateLogin() {
    var username = document.getElementById(username).value;
    var password = document.getElementById(password).value;

    return false;


Comment posted by user2864740

Use valid IDs – like “username” (note the quotes). The code is asking to find undefined