CODEWITHSUNDEEP
javascripthtmlcss
Yevgen
Yevgen

Reputation: 797

Error if targeting multiple element Id's with Javascript and one of then is not found

I am trying to target multiple IDs with JavaScript so that I can disable the input field for them. It seems to be pretty straight forward using the following script, but I noticed that on pages where the middle Element does not exist, the script does not disable the 3rd one (as though it just stops working when not finding the second element).

<script>
document.getElementById("id_1").disabled = true;
document.getElementById("id_2").disabled = true;
document.getElementById("id_3").disabled = true;
</script>

So on pages when all 3 IDs exist, the script works perfectly. But on pages where either "id_1" or "id_2" does not exist, the remaining elements are not disabled even if they do exist.

Is there any way around that? Note that I can not create separate scripts for each page because this will go in the footer which is the same for all pages.

Thanks!

Upvotes: 0

Views: 98

Answers (3)

Joshua Kleveter
Joshua Kleveter

Reputation: 1769

TL;DR:

The reason that the script stops working is that it is throwing an error when you try to disable an element that doesn't exist.

In Detail:

document.getElementById() will return null if the element that you tried to find does not exist (Here's the MDN page).

When you try to set the .disabled property to true on null JavaScript will throw a TypeError. Unless you handle that error with a try/catch block it will cause your script to stop executing and the later input elements will not become disabled.

Solution

To fix this you'll want to check that your element actually is an element before trying to set it to disabled. Something like this:

var el = document.getElementById('id_1');

if ('null' !== typeof el) {
  el.disabled = true;
}

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

You should test for the existence first, then disable it if it exists. I also put the id's in an array to simplify the code.

var ids = ['id_1','id_2','id_3'];

for (var i = 0; i < ids.length; i++) {
  var el = document.getElementById(ids[i]);
  el && (el.disabled = true);
}
<input id="id_1" value="id_1">
<input id="id_3" value="id_3">

Upvotes: 2

user3329290
user3329290

Reputation:

This is because document.getElementById returns null when the element has not been found, so effectively you're causing an exception while trying to set disabled on null. This would be the case when one of the elements are not set in the DOM. What you will have to do is check whether the element has been found correctly then set the element or loop through them all.

Upvotes: 2

Related Questions