Console blocking execution because getElementbyId is null (but I want it to be)

Question

EDIT: The answers of Mr. Veron, Mr. Spungin, and Mr. Shah fit my needs perfectly. My error is apparent, and the console's warning perfectly sensible. Thank you all.

I'm trying to determine the existence of an element in the DOM. In accordance with what extant posts have suggested, I've resorted to using getElementbyId + querySelector and then checking if it's null/undefined with a conditional.

let target = document.getElementbyId(a).querySelector(b)

if(typeof(target) != 'undefined' && target != null){
...
}

Here's where I run into an error. When the first line executes, my console tosses up the error

Uncaught (in promise) TypeError: document.getElementById(...) is null

because "target" is null -- but I intend for it to be null, and thus am mildly irked that the console is for once acting against my interest.

This is an implementation offered and endorsed by many on Stack Overflow -- and yet I cannot easily find people facing the same obstruction that I am. Therefore, I'd appreciate any explanations for why such a warning is needed or ways to circumvent it (a better implementation than what has been widely suggested ). Much thanks.

Answer 1

check for undefined before calling querySelector

let target = document.getElementbyId(a) ? document.getElementbyId(a).querySelector(b) : undefined

Answer 2

You are getting this error:

Uncaught (in promise) TypeError: document.getElementById(...) is null

Because you are trying to use querySelector on the element that might be null or undefined.

Go with this approach:

let element = document.getElementbyId(a);
let target = element && element.querySelector(b);

if(typeof(target) != 'undefined' && target != null){
...
}

Answer 3

As noted by others, when .getElementbyId fails, it's undefined, and attempting to call methods on undefined raises an error.

This is what the Optional Chaining (?.) operator is for.

You can also simplify your conditional to be target != undefined, since both of these methods will return undefined, and variable != undefined returns true for undefined and null.

let target = document.getElementbyId(a)?.querySelector(b);
                               // here ^
if(target != undefined){
...
}