Add an eventlistner to an DOM element when it exist

Question

I am trying to add an eventlistner to a variable that triggers when the variabel changes, problem here is that this variable doesn't exist on load, but only becomes available when someone starts an embedded youtube video.

// Tealium Tracking Code for YouTube iframe embeds
//
// Read the identifiers on the YouTube iframes. If not present, then add ids
if (jQuery('iframe[src*="youtube.com"]').length > 0) {
 var i = 0, id;
 window.iframe_id = [];
 jQuery('iframe[src*="youtube.com"]').each(function() {
   if (jQuery(this).attr('id')) {
     id = jQuery(this).attr('id');
     window.iframe_id.push(id);
   } else {
     id = 'tealium_youtube' + i;
     jQuery(this).attr('id', id);
     window.iframe_id.push(id);
     i++;
   }
 });
}

// Configure Milestones
//
function setMileStones(i) {
  // Set the intervals here as you want them reported, in % viewed, each number separated by a comma
  // If you do not want mileStones set mileStones[i] = [] ;
  mileStones[i] = [10, 25, 50, 75, 90];
}
var mileStones = [];
for (i = 0; i < window.iframe_id.length; i++) {
  setMileStones(i);
}

// Load the YouTube iframe library
//
var ytapi = document.createElement('script');
ytapi.src="https://ww" + "w.youtube" + ".com/iframe_api";
var scriptref = document.getElementsByTagName('script')[0];
scriptref.parentNode.insertBefore(ytapi, scriptref);

window.players = [];
window.onYouTubeIframeAPIReady = function() {
  // Confirm existing ID or set ID in the iframe for each video on the page
  jQuery('iframe[src*="youtube.com"]').each(function() {
  var id = jQuery(this).attr('id');
  window.players[id] = new YT.Player(id, {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
      }
    });
  });
};

window.start = [];
window.onPlayerReady = function(event) {
 //Log that the video is ready/open
 var idx;
 for (i = 0; i < window.iframe_id.length; i++) {
   if (window.iframe_id[i] === event.target.a.id) {
     idx = i;
   }
   window.start.push(true);
 }
 if (event.target.getPlayerState() === YT.PlayerState.CUED) {
   var player = event.target;
   utag.link({
     tealium_event: 'video_load',
     video_id: player.j.videoData.video_id,
     video_length: player.getDuration(),
     video_name: player.j.videoData.title,
     video_platform: 'YouTube'
   });
  }
};

var playerCheckInterval;

window.onPlayerStateChange = function(event) {
 player = event.target;
 var playhead, idx;
 for (i = 0; i < window.iframe_id.length; i++) {
   if (window.iframe_id[i] === event.target.a.id) {
     idx = i;
   }
 }

 tealium_event = "";

 if (event.data == YT.PlayerState.PLAYING) {
   if (start[idx]) {
     if (mileStones[idx].length > 0) {
       playerCheckInterval = setInterval(mileStoneCheck, 50);
     }
     tealium_event = "video_start";
   } else {
     //This will catch when the video playback is changed from not playing to playing
     tealium_event = "video_play";
     playhead = player.getCurrentTime().toString();
   }
   start[idx] = false;

 } else if (event.data == YT.PlayerState.PAUSED) {
   tealium_event = "video_pause";
   playhead = player.getCurrentTime().toString();

 } else if (event.data == YT.PlayerState.ENDED) {
   if (mileStones[idx].length > 0) {
     clearInterval(playerCheckInterval);
     // reset in case visitor replays the video
     playerCheckInterval = 0;
     setMileStones(idx);
   }
   tealium_event = "video_complete"; // utag
 }

 if (tealium_event) {
   utag.DB("Video event: " + tealium_event + ", video ID: " + window.iframe_id[idx]);
   utag.link({
     tealium_event: tealium_event,
     video_playhead: parseInt(playhead),
     video_id: player.j.videoData.video_id,
     video_length: player.getDuration(),
     video_name: player.j.videoData.title,
     video_platform: 'YouTube'
   });
 }

  function mileStoneCheck() {
    var idx;
    for (i = 0; i < window.iframe_id.length; i++) {
      if (window.iframe_id[i] === player.a.id) {
        idx = i;
      }
    }
    var duration = player.getDuration();
    var playhead = player.getCurrentTime();
    var percComplete = (playhead / duration) * 100;
    var ms_len = mileStones[idx].length;
    if (ms_len > 0) {
      var next_ms = mileStones[idx][0];
      if (next_ms <= percComplete) {
        mileStones[idx].shift();
        utag.DB("Video event: video_milestone, video ID: " + window.iframe_id[idx] + ", Milestone=" + percComplete.toFixed());
        utag.link({
          tealium_event: 'video_milestone',
          video_playhead: parseInt(playhead),
          video_id: player.j.videoData.video_id,
          video_length: parseInt(duration),
          video_milestone: next_ms.toString(),
          video_name: player.j.videoData.title,
          video_platform: 'YouTube'
        });
      }
    }
  }
};

The variable i want to monitor is var player which is only available when the callback has been triggered.

Is it someway possible to add an eventlistner on a variable, when it exist?

I tried something like this

window.onload = function () {

   if (typeof player !== "undefined")
   {
      doSomething();
   }

}

But this does not seem to monitor whether when player becomes "available" => from where I could add a event listener. It seems to only run once, being when window is loaded.

I assume this is what you're talking about: `var player = event.target;`. Yes, you should be able to add the event listener just after this line. Also not to be pedantic, but you are adding the event listener to the DOM element. The "variable" is just pointing to that DOM element. — David784, Jan 26 '19 at 17:55
I am not able to add anything to this js, so i have do it outside. I am not sure what you pointing at by "the variable is pointing to that dom element"? — anita, Jan 26 '19 at 18:12
Variables can be a lot of things. When you say "variable," you could be talking about a number, or a string, or a DOM Element, or a generic object, etc. You can't attach event listeners to the vast majority of those things. So if you say "add an eventlistner on a variable," the people you're talking to might be confused. Whereas if you say "add an event listener to a DOM Element," I think pretty much everybody will get you right away. — David784, Jan 26 '19 at 18:21

score 0 · Answer 1 · answered Jan 26 '19 at 17:51

0

I think you can just call the function after changing the value of the variable.

Possible Code Sample:

window.onPlayerStateChange = function(event) {
  player = event.target;
  var playhead, idx;
  for (i = 0; i < window.iframe_id.length; i++) {
    if (window.iframe_id[i] === event.target.a.id) {
      idx = i;
    }
  }
  ...
  // the player var changes here so just call what you need here like
  doSomething(player);
}

answered Jan 26 '19 at 17:51

TheFlyBiker 420

37
1
12

I am not able to add something to the call back function, it has to be added outside. – anita Jan 26 '19 at 18:12
can you add the outside function to the global namespace and call it here – TheFlyBiker 420 Jan 26 '19 at 18:17
//adding function to global namespace `global.functionName = function(){}` // calling it `global.functionName();` – TheFlyBiker 420 Jan 26 '19 at 18:17
Well, yes I could put it in as global, but how do i ensure that it is being triggered if `player` exist? – anita Jan 26 '19 at 18:39
`if(player) global.dosomething();`? – TheFlyBiker 420 Jan 26 '19 at 18:57
I am not able to make the above function global, I can add an function outside, but not call them within the javascript which contains the youtube trigger code. – anita Jan 26 '19 at 23:34

Add an eventlistner to an DOM element when it exist

1 Answers1