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;">neveropen</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:
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">neveropen</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:
- On click of submit button:
- On click of file in the “Source” section:
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">neveropen</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:
