How can i fix : "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')"?

Question

I tried some solution to fix this error like put <script> below </body> but it didn't work. So how can i fix this. Here is my code. I want to know what is my fault so i can fix this when i met this error again. Thanks first

<body>
        <div id="main">
            <div id="login">
                <h2><strong>Login</strong></h2>
                <br>
                <form id="info" ac>
                    <label>Username:</label>
                    <input type="text" placeholder="Input username" name="username" id="first">
                    <label>Password:</label>
                    <input type="password" placeholder="Input password" name="password" id="seconde">
                    <div>
                        <button id="bt">Login</button>
                    </div>
                </form>
            </div>
        </div> 
        <script>
document.querySelector("bt").addEventListener("click",function(check){
    var a = document.querySelector("#first").value;
    var b = document.querySelector("#second").value;
    if(a=="admin" && b=="123456"){
        alert('Login Success!\nRedirecting to next page');
        document.querySelector("#info").action="nextpage1.html"
    }else{
        alert('Login failed!\nIncorrect username or password');
    }
})
        </script>
 </body>

You probably meant `document.querySelector("#bt")` to select by ID. Just `"bt"` would be looking for a `` element which doesn't exist — Phil, Apr 07 '22 at 05:46
@Phil oh it really word, well the error here just my broken eyes. Thanks. — Noo, Apr 07 '22 at 05:56

score -1 · Answer 1 · answered Apr 07 '22 at 06:32

As Phil suggested above, document.querySelector will look for whatever you have mentioned inside it.

Since you have bt it'll look for the tag <bt>.

So if you wanna select an id bt make sure to use # before the name of the actual id.

or If you wanna select a class, don't forget to use . before the name of the actual class name.

Example:

Selecting with ID - document.querySelector("#bt")
Selecting with ClassName - document.querySelector(".bt")

score -1 · Accepted Answer · answered Apr 07 '22 at 06:43

-1

This error is showing because you must specify that you are selecting what (class/id)
in your code you forgot to put a # before id name

document.querySelector("#bt")

you also can use

document.getElementById("bt")

answered Apr 07 '22 at 06:43

Afshar Sharifi

152
1
7

score -1 · Answer 3 · answered Apr 07 '22 at 06:54

Use this code: Update 1: In input, changed the id from seconde to second Update 2: In document.querySelector, added # with bt.

<body>
        <div id="main">
            <div id="login">
                <h2><strong>Login</strong></h2>
                <br>
                <form id="info" ac>
                    <label>Username:</label>
                    <input type="text" placeholder="Input username" name="username" id="first">
                    <label>Password:</label>
                    <input type="password" placeholder="Input password" name="password" id="second">
                    <div>
                        <button id="bt">Login</button>
                    </div>
                </form>
            </div>
        </div> 
        <script>
document.querySelector("#bt").addEventListener("click",function(check){
    var a = document.querySelector("#first").value;
    var b = document.querySelector("#second").value;
    if(a=="admin" && b=="123456"){
        alert('Login Success!\nRedirecting to next page');
        document.querySelector("#info").action="nextpage1.html"
    }else{
        alert('Login failed!\nIncorrect username or password');
    }
})
        </script>
 </body>

How can i fix : "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')"?

3 Answers3