JavaScript exception on on-click function for getting class attribute

Question

I need help to resolve exception in chrome console for below script. (I am not proficient in JavaScript.)

Exception is

Uncaught TypeError: Cannot read property 'indexOf' of undefined

The line with indexOf is throwing the error.

document.onclick = function(e){
    var target = e.target ? e.target : e.srcElement;
    if($(target).attr('class').indexOf('abcd') == -1 && $(target).attr('class').indexOf('js-toggle') == -1){
        $(".nav-mn").animate({left:"-270px"},200);
        $("body").animate({left:"0px"},200);
        $(".nav-mn").removeClass("open");
    } 
}

check the target element properly,, it is not getting found/ doesn't have e.srcElement check it — Vinod kumar G, Dec 12 '17 at 03:55
exception express that [Cannot read property 'indexOf' of undefined"] means you can check $(target).attr('class') is really exist or not. — Lin Yuan, Dec 12 '17 at 03:56
is there a way to log where the call having error is coming from? How can i log the target element — Amit Mahajan, Dec 12 '17 at 03:56
Why are you not using hasClass? The error is saying there is no class... — epascarello, Dec 12 '17 at 03:56
Thanks @epascarello can you give an example for hasClass. This seems better option. — Amit Mahajan, Dec 12 '17 at 03:58
Found an example for hasClass, this looks much better than reinventing the wheel :) https://stackoverflow.com/questions/35615733/check-if-element-has-class — Amit Mahajan, Dec 12 '17 at 04:04

score 1 · Answer 1 · answered Dec 12 '17 at 03:57

When you get this error Cannot get the property of undefined, it means you're trying to access something which doesn't exist. Hence, in your case you need to check if $(target).attr('class') exists before calling the .indexOf() mehtod on it like shown below.

document.onclick = function(e){
    var target = e.target ? e.target : e.srcElement;
    if($(target).attr('class') != 'undefined' && $(target).attr('class').indexOf('abcd') == -1 && $(target).attr('class').indexOf('js-toggle') == -1){
        $(".nav-mn").animate({left:"-270px"},200);
        $("body").animate({left:"0px"},200);
        $(".nav-mn").removeClass("open");
    } 
}

Read this post for further information

How to check for "undefined" in JavaScript?

Thanks I will test it and let you know. – Amit Mahajan Dec 12 '17 at 04:01 — Amit Mahajan, Dec 12 '17 at 04:01

Manish · Answer 2 · 2017-12-12T04:12:16.807

1

I'm not sure why are you using indexOf to check for a class instead you should use the built in function of jQuery hasClass.

Determines whether any of the matched elements are assigned the given class

this will save you from checking whether the attr('class') is undefined or not. But yes you will have to make sure $(target) is never undefined.

Below is a small demo of the same.

$("div").click(function(){
 if ($(this).hasClass("abcd") ) {
  //do something it does have the  class!
  console.log("i have the abcd class");
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abcd def ghi">
Click Me
</div>

edited Dec 12 '17 at 04:12

answered Dec 12 '17 at 04:04

Manish

4,692
3
29
41

The first check `if($(this) && ...` is useless since jQuery always is thruthy. It is basically doing `if (true && ...` – epascarello Dec 12 '17 at 04:09
@epascarello yes in here it is because the function will be triggered only when div is clicked. Just was trying to say that if in case function is being triggered by some other means. Will update. Thanks :) – Manish Dec 12 '17 at 04:11

A.D. · Accepted Answer · 2017-12-13T03:10:50.370

the document.onclick the event is bind for every element in the DOM means if you click on a button that event also target the button parent too. For this, you can bind the event for a specific type of element.

$("Your element").click(function(){ // "Your element" is change according to your element type wheater it's a div or button.
    if ($(this).hasClass("abcd") ) {
        if($(this).attr('class') != 'undefined' && $(this).attr('class').indexOf('abcd') == -1 && $(this).attr('class').indexOf('js-toggle') == -1){
        $(".nav-mn").animate({left:"-270px"},200);
        $("body").animate({left:"0px"},200);
        $(".nav-mn").removeClass("open");
    } 
    }
});

And there no need for multiple checks for same class name absc or js-toggle you can also use the same method for both the nested condition.

$("Your element").click(function(){ // "Your element" is change according to your element type wheater it's a div or button.
        if ($(this).hasClass("abcd") && $(this).hasClass('js-toggle')) {

            $(".nav-mn").animate({left:"-270px"},200);
            $("body").animate({left:"0px"},200);
            $(".nav-mn").removeClass("open");

        }
    });

Out of curiosity `$(this).attr('class').indexOf('abcd')` wont this condition be always true as `$(this).hasClass("abcd")` already validates this. and also wgy do we need to use `indexOf` if we are using `hasClass` you have have used both. — Manish, Dec 13 '17 at 02:47
Yes but always depends on condition @Manish.There we need to execute the method which comes first accordingly. I just see the problem with click event so the other thing is to remain same for the next statement if this one has an issue. — A.D., Dec 13 '17 at 03:12

JavaScript exception on on-click function for getting class attribute

3 Answers3