Javascript check undefined issue

Question

The following code throws an error message in the console and i don't understand this logic, because in my code you can see i have written if statements which should first check if the objects exist.

if (typeof document.getElementById("trbrok0").checked != "undefined") document.getElementById("trbrok0").checked = false;
if (typeof document.getElementById("trbrok1").checked != "undefined") document.getElementById("trbrok1").checked = false;
if (typeof document.getElementById("trbrok2").checked != "undefined") document.getElementById("trbrok2").checked = false;
if (typeof document.getElementById("trbrok3").checked != "undefined") document.getElementById("trbrok3").checked = false;

Like you can see we should first check if the object exists and then try to change the value of "checked" property in the object. But I always get the following error message:

Uncaught TypeError: Cannot read property 'checked' of null

the elements you try to access do not exist

messerbill
– messerbill

2018-03-02 10:48:04 +00:00
Commented Mar 2, 2018 at 10:48 — messerbill
– messerbill, Commented Mar 2, 2018 at 10:48
You are trying to get checked property from null

Thum Choon Tat
– Thum Choon Tat

2018-03-02 10:49:19 +00:00
Commented Mar 2, 2018 at 10:49 — Thum Choon Tat
– Thum Choon Tat, Commented Mar 2, 2018 at 10:49

LiefdeWen · Accepted Answer · 2018-03-02 10:54:41Z

5

Because document.getElementById("trbrok0") returns a DOM node and if it doesn't exist it returns null. null doesn't have a property checked so document.getElementById("trbrok0").checked throws the error.

The fix would be to add a check if the node exists first with if(document.getElementById("trbrok0")!= null){ }

edited Mar 2, 2018 at 10:54

answered Mar 2, 2018 at 10:48

LiefdeWen

5862 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maik Silber Over a year ago

ok great so anyway there is a logic to check this good to know

Abhijit Kar ツ · Accepted Answer · 2018-03-02 11:32:11Z

Have a look

function checkNullAndSetVal(id, val) {
  if (document.getElementById(id) == null) {
    console.log(id + ", Null or Undefined");
    return;
  }

  document.getElementById(id)["checked"] = val;
  console.log("Successfully Updated: ", id);
}

checkNullAndSetVal("trbrok0", false);
checkNullAndSetVal("trbrok1", true);
checkNullAndSetVal("trbrok2", false);
checkNullAndSetVal("trbrok3", true);

<input id="trbrok2" type="checkbox" name="trbrok" value="2">
<input id="trbrok3" type="checkbox" name="trbrok" value="3">

Explanation:

if you check for null with double equals to (==), then it check for both null & undefined
Use a function to reduce repetition of code.
Use square bracket syntax to create non existing properties in an object. e.g obj["newProperty"] = "Some Value";

31piy · Accepted Answer · 2018-03-02 10:49:40Z

0

When you check the type of the checked, the element, selected by document.getElementById doesn't exist, and that's why:

Cannot read property 'checked' of null

because null doesn't have a property named checked.

answered Mar 2, 2018 at 10:49

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Collectives™ on Stack Overflow

Javascript check undefined issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related