What is a better way to handle document.getElementById throwing nullreference error

Question

I try to get some elements from html, that may or may not exist. Now if I just try

//previous code
document.getElementById("MyElement1").checked = false;
document.getElementById("MyElement2").checked = false;
...
//rest of the code

then the rest of the code won't get executed if one of the elements doesn't exist.

I would just do

try {
   document.getElementById("MyElement1").checked = false;
   document.getElementById("MyElement2").checked = false;
   ...
} catch (e) {
   console.log(e);
}

but it is said that you should never use a try...catch for non serious errors.

Is there a more elegant way that makes javascript ignore this line of code if one of these elements doesn't exist?

PS: If one of these elements doesn't exist, the following ones won't either. So if MyElement1 exists, but MyElement2 doesn't, then MyElement3, MyElement4 etc won't exist either.

Also I try to avoid large chunks of code like using an if for each one of these elements

Answer 1

If I were you, I would do the following:

1. Add a common class name (say myElement) to all the elements.
2. Use document.getElementsByClassName to retrieve all the elements in one go.
3. Iterate them to set checked value of returned elements

Solution would be similar to below:

//previous code
const els = document.getElementByClassName("myElement");
Array.from(els).forEach((el) => { el.checked = false; });
...
//rest of the code

Answer 2

Using a conditional might do the trick for you. If MyElement exists, this snippet changes the checked value for it, if it doesn't exist it changes the value of a dummy object.

(document.getElementById("MyElement") || {}).checked = false

function check(value)
{
  (document.getElementById("MyElement") || {}).checked = value;
  (document.getElementById("MyElement2") || {}).checked = value; // Doesn't exist but is OK
}

<input type="checkbox" id="MyElement" value="1"></input>
<input type="button" onclick="check(true)" value="Check it"></input>
<input type="button" onclick="check(false)" value="Uncheck it"></input>

Answer 3

kind of if statement

document.getElementById("MyElement1") && (document.getElementById("MyElement1").checked = false);

if element exists then document.getElementById("MyElement1") will be result in true due to the && condition, and JS will execute the assignment only if element exists.

Answer 4

I do not know if this is the best way to do it. However, I would approach it this way.

<div id="example">
 <span>I exist</span>
</div>

<div id="result">
 No result yet.
</div>
<div id="result2">
 No result2 yet.
</div>

function isInPage(node) {
  return (node === document.body) ? false : document.body.contains(node);
}
let result = document.getElementById('result')
let result2 = document.getElementById('result2')

const test = document.getElementById('example')
const hello = document.getElementById('hello')
result.innerText = isInPage(test)
result2.innerText = isInPage(hello)
console.log(isInPage(test))

Read more about the API here

• Node.contains()

Answer 5

I don't think there's any problem doing try catch, it is one of the standard ways and using it to apply logic is no harm.