How can I avoid "Cannot read property" error when the element isn't exist?

Question

Here is my code:

category = $(document).find(".chosen-single:not(.chosen-default)  > span:first-child")[0].outerHTML

Sometimes it throws:

Uncaught TypeError: Cannot read property 'outerHTML' of undefined

What kind of condition should I put on the way of that?

check it out, it is not the accepted in this answer but I have used it and never looked back https://stackoverflow.com/a/15013673/4770813 — Scaramouche, Mar 13 '18 at 13:25

Asons · Answer 1 · 2018-03-13T13:42:28.780

1

One nice trick is to use an anonymous function, like this, where you pass the query as a parameter

category = (function (el) {
             return (el) ? el.outerHTML : '';
           })($(document).find(".chosen-single:not(.chosen-default) > span:first-child")[0]);

It will save you setting up an extra variable and an if/then/else statement.

edited Mar 13 '18 at 13:42

answered Mar 13 '18 at 13:35

Asons

84,923
12
110
165

Odd .. You've edited your answer and change the position of a parentheses. And I tested it, both versions work. Why? `:-)` – Martin AJ Mar 13 '18 at 14:01
@MartinAJ I saw I made a mistake, missing one parenthesis (the right one just after the `}`), and when I did, I removed the initial jQuery code and added it back. Funny if it still worked though :) ... and a self executing closure function should look like this `(function () {...})();` – Asons Mar 13 '18 at 14:06
I tested, you can write it like this: `function () {...}();`, Those parentheses are redundant – Martin AJ Mar 13 '18 at 14:09
1

@MartinAJ It might, though I learned that one should add parentheses around the function to indicate that it is a function expression. – Asons Mar 13 '18 at 14:13

score 0 · Accepted Answer · answered Mar 13 '18 at 13:23

Make your code look something like this:

var element = $(document).find(".chosen-single:not(.chosen-default)  > span:first-child")[0];

if(element) {
   category = element.outerHTML
}

it's seems that sometimes the element you are searching is missing, so the result is undefined, to avoid this issue, check if found what you queried for

score 0 · Answer 3 · answered Mar 13 '18 at 13:25

Either check the native DOM element or check the length of the jQuery object:

var obj = $(document).find(".chosen-single:not(.chosen-default)  > span:first-child")[0];
var category = "";

if (obj) category = obj.outerHTML;

Checking the length:

var $obj = $(document).find(".chosen-single:not(.chosen-default)  > span:first-child");
var category = "";

if ($obj.length) category = obj.outerHTML;

score 0 · Answer 4 · answered Mar 13 '18 at 13:26

Just store the element in a variable, then check it before accessing:

var $chosenItem = $(document).find(".chosen-single:not(.chosen-default)  > span:first-child")[0];
category = $chosenItem && $chosenItem.outerHTML;

Or substitute your conditional of choice.

score 0 · Answer 5 · answered Mar 13 '18 at 13:32

Create a variable that counts the number of elements with that particular class, then create an if statement.

For example:

   var chosenClass = document.querySelectorAll('.chosen-single').length;
   if(chosenClass == 0) {
      null;
   }
     else {   
     }

How can I avoid "Cannot read property" error when the element isn't exist?

5 Answers5