Question

I am trying to write a piece of code that when a button is clicked, it checks through a list of images, checks if it has an id of ‘video’ and if it does then display an overlay and remove the player that is there.

I keep getting this error:

Uncaught TypeError: Cannot call method 'indexOf' of undefined

Here is the code:

$("#actions .btn").click(function(){
       $('.span img').each(function(){
            if($(this).attr('id').indexOf('video') != -1){
                var spanid = $(this).attr('id').replace(/video/, '');
                $(this).removeClass('hideicon');
                $('#mediaplayer' + spanid + '_wrapper').remove();
            }
        });
});

Answer 1

The .attr() method will return undefined if the attribute you’re looking for doesn’t exist on the element. I would suggest adding an extra check to your condition:

var id = $(this).attr('id');
if(id && id.indexOf('video') != -1) {
    //OK!
}

From the docs:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set.

Interestingly, the native getAttribute function returns null for attributes that haven’t been set. jQuery, for some reason, explicity checks for this and returns undefined instead:

ret = elem.getAttribute(name);

// Non-existent attributes return null, we normalize to undefined
return ret === null ? undefined : ret;