The document.querySelector returns null but element exists

Last Updated : 20 Dec, 2023

document.querySelector() will return the first element that matches the specified group of selectors. If no match is found ‘null’ is returned.

Syntax:

let input = document.querySelector("input.email");

It will return the first input element having class ’email’.

Let us now discuss the error “document.querySelector returns null, but the element exists”

Example 1: Let us look over the error for the “id” selector. In this, #(hash) is missing in the querySelector value. # define that we are selecting the “id” selector. In the output, On click of the submit button, we can see the following error.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">    
</head>
<body> 
    <h2 style="color:green;">GeeksforGeeks</h2>   
    <button id="out">Submit</button>
 
    <script>
        const get = document.querySelector('out')
        get.addEventListener('click',(e)=>{
            get.style.backgroundColor='red';
            get.innerHTML="Hii GFG , How r u???"
        })
    </script>
</body>
</html>

Output:

Output

Example 2: let us look over the error for the class selector. In this . (dot) is missing in the querySelector() value.The . (dot) define that we are selecting the class selector.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">    
</head>
<body> 
    <h2 style="color:green">GeeksforGeeks</h2>   
    <button class="out">Submit</button>
 
    <script>
        const get = document.querySelector('out')
        get.addEventListener('click',(e)=>{
            get.style.backgroundColor='red';
            get.innerHTML="Hii GFG , How r u???"
        })
    </script>
</body>
</html>

Output:

Output

Note: Both give the same error as the developer needs to specify the type of selector (Either id or class). In both examples, it’s missing, so it gives the same error in the output images.

Example 3: The following code shows the solution to the above issue. We need to specify the type of selector we are using as shown below. We get the correct output as the code is working.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">    
</head>
<body> 
    <h2 style="color:green">GeeksforGeeks</h2>   
    <button class="out">Submit</button>
 
    <script>
        const get = document.querySelector('.out')
        get.addEventListener('click',(e)=>{
            get.style.backgroundColor='red';
            get.innerHTML="Hii GFG , How r u???"
        })
    </script>
</body>
</html>