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
– Vinod kumar G, Commented Dec 12, 2017 at 3:55
exception express that [Cannot read property 'indexOf' of undefined"] means you can check $(target).attr('class') is really exist or not. — Lin Yuan
– Lin Yuan, Commented Dec 12, 2017 at 3:56
is there a way to log where the call having error is coming from? How can i log the target element — Amit Mahajan
– Amit Mahajan, Commented Dec 12, 2017 at 3:56
Why are you not using hasClass? The error is saying there is no class... — epascarello
– epascarello, Commented Dec 12, 2017 at 3:56
Found an example for hasClass, this looks much better than reinventing the wheel :) stackoverflow.com/questions/35615733/check-if-element-has-class — Amit Mahajan
– Amit Mahajan, Commented Dec 12, 2017 at 4:04

Pankaj Gadge · Accepted Answer · 2017-12-12 03:57:21Z

1

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?

answered Dec 12, 2017 at 3:57

Pankaj Gadge

2,8443 gold badges21 silver badges25 bronze badges

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

1 Comment

Amit Mahajan Over a year ago

Thanks I will test it and let you know.

Manish · Accepted Answer · 2017-12-12 04:12:16Z

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, 2017 at 4:12

answered Dec 12, 2017 at 4:04

Manish

5,0963 gold badges33 silver badges47 bronze badges

2 Comments

epascarello Over a year ago

The first check if($(this) && ... is useless since jQuery always is thruthy. It is basically doing if (true && ...

Manish Over a year ago

@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 :)

A.D. · Accepted Answer · 2017-12-13 03:10:50Z

0

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");

        }
    });

edited Dec 13, 2017 at 3:10

answered Dec 12, 2017 at 4:16

A.D.

2,3722 gold badges17 silver badges25 bronze badges

2 Comments

Manish Over a year ago

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.

A.D. Over a year ago

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.

Collectives™ on Stack Overflow

JavaScript exception on on-click function for getting class attribute

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related