Question

Hey guys,
i’m not much of a hardcore coder and so I don’t get this basics here.

Imagine I have multiple ‘s on my page (that contain Youtube Videos via swfobject).
All those object’s have a unique ID like ytplayer_12, ytplayer_2, ytplayer_56, etc.

I need to run through all of this ytplayer_’s with jquery and add an EventListener to them.

It works just fine! I just wonder if I’m declaring the variables ($ytid, ytid) in the right place – outside of the onYouTubePlayerReady() function? Or should I declare the vars inside of the function? Or even inside of the each-loop?

var $ytid = '',
    ytid = '';

function onYouTubePlayerReady() {

    $('object[id^="ytplayer_"]').each(function() {

        $ytid = $(this).attr('id');
        ytid = document.getElementById($ytid);

        ytid.addEventListener("onStateChange", "foo");

    });
};

I’m just curious what is better in this case and if I’m doing that correct right now?
Thank you for your info and help?

Answer 1

Declaring variables at global scope is bad idea. Move them into function scope.

function onYouTubePlayerReady() {
    var $ytid = '', ytid = '';
    $('object[id^="ytplayer_"]').each(function() {
        $ytid = $(this).attr('id');
        ytid = document.getElementById($ytid);

        ytid.addEventListener("onStateChange", "foo");
    });
};

And you can get rid of them:

function onYouTubePlayerReady() {
    $('object[id^="ytplayer_"]').each(function() {
        this.addEventListener("onStateChange", "foo");
    });
};