object.prototype breaking javascript

Question

I'm gonna try to explain this the best I can. I apologize if this doesn't make sense.

"Object.prototype" seems to be breaking my javascript and I don't know how to fix this. I'm using a the YouTube api and I created a script that loops though 10 videos (xml files) and repeats itself.

If you look at my code on the very bottom of the javascript you will notice I have "Object.prototype.getKey = function(value){ ... "

That code is breaking other parts of javascript on my page. If I remove that... then breaks my YouTube player to not loop to the next video. So I can't do that.

Here's the error:

Uncaught TypeError: X[g].exec is not a function
    at fb.tokenize (jquery-latest.min.js:2)
    at Function.fb [as find] (jquery-latest.min.js:2)
    at m.fn.init.find (jquery-latest.min.js:2)
    at HTMLDivElement.<anonymous> (photoAds-slider.js:37)
    at Function.each (jquery-latest.min.js:2)
    at m.fn.init.each (jquery-latest.min.js:2)
    at m.fn.init.d.fn.flexslider (photoAds-slider.js:37)
    at HTMLDocument.<anonymous> (screen.php:44)
    at j (jquery-latest.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)

Anyway around this?

PHP

// ========================================
// Load the xml files for youtube player (YouTube IDs)
// ========================================

$xml1=simplexml_load_file("youtube/1.xml");
$youtube1 = $xml1->video;

$xml2=simplexml_load_file("youtube/2.xml");
$youtube2 = $xml2->video;

$xml3=simplexml_load_file("youtube/3.xml");
$youtube3 = $xml3->video;

$xml4=simplexml_load_file("youtube/4.xml");
$youtube4 = $xml4->video;

$xml5=simplexml_load_file("youtube/5.xml");
$youtube5 = $xml5->video;

$xml6=simplexml_load_file("youtube/6.xml");
$youtube6 = $xml6->video;

$xml7=simplexml_load_file("youtube/7.xml");
$youtube7 = $xml7->video;

$xml8=simplexml_load_file("youtube/8.xml");
$youtube8 = $xml8->video;

$xml9=simplexml_load_file("youtube/9.xml");
$youtube9 = $xml9->video;

$xml10=simplexml_load_file("youtube/10.xml");
$youtube10 = $xml10->video;


$volume = '100';
$quality = '720';

$videos = array("$youtube1", "$youtube2", "$youtube3", "$youtube4", "$youtube5", "$youtube6", "$youtube7", "$youtube8", "$youtube9", "$youtube10",);

// print_r(array_values($videos));

JAVSCRIPT

playlistids = <?php echo json_encode($videos); ?>;

  var playing = playlistids[0];
  var ytplayer;

  function onYouTubeIframeAPIReady() {
    ytplayer = new YT.Player('ytapiplayer', {
        width: '100%',
        height: '100%',
        videoId: playing,
        events: {
            'onStateChange': onytplayerStateChange,
            'onReady': onPlayerReady
        },
          playerVars: { 
           'controls': 0,
           // 'cc_load_policy': 1,
           'rel' : 0,
           'showinfo' : 0,
          }
    });
}


function onPlayerReady(event) {
    event.target.setPlaybackQuality(<?php echo $quality; ?>)
    event.target.setVolume(<?php echo $volume; ?>)
    // alert('Start playing entry #0 (preloaded).')
    event.target.playVideo()

    // Fade out music player
    audio_fade_out();

}

function play(ytid) {
    if (ytplayer) {
        playing = ytid
        // alert('On to entry #'+ nextentrykey +', playing set to: ' + playing)
        ytplayer.loadVideoById(ytid, 0, <?php echo $quality; ?>);
    }
}


function onytplayerStateChange(event) {
  //alert('NEW STATE: ' + event.data)
    if ( event.data == 0 ) {
       setTimeout(youtubeTimer, 4200);

        // Fade in music player
        audio_fade_in();

        // alert('Since the new player state is '+ event.data +', the video has ended. Getting next key after playing ' + playing + '.');
        nextentrykey = parseInt(playlistids.getKey(playing))+1
        if (nextentrykey >= playlistids.length) {
                nextentrykey = 0
        }
        document.getElementById("ytapiplayer").style.visibility = "hidden";
    }
}


function youtubeTimer() {
        play(playlistids[nextentrykey]);
        document.getElementById("ytapiplayer").style.visibility = "visible";

        // Fade out music player
        audio_fade_out();
}


Object.prototype.getKey = function(value){
  for(var key in this){
    if(this[key] == value){
      return key;
    }
  }
  return -1;
};




} else {
  // alert('YouTube is OFF')
  document.getElementById("ytapiplayer").style.visibility = "hidden";
}

How about making getKey a normal function and call getKey(playlistids, playing) instead? Extending built-in prototypes is bad practice. Why did you extend the prototype in the first place? — Felix Kling
– Felix Kling, Commented Feb 17, 2017 at 16:37
What does seems to be breaking my javascript mean? Does the browser throw an exception? Do you get an error when using it nextentrykey = parseInt(playlistids.getKey(playing))+1 ? What is the issue? — Nope
– Nope, Commented Feb 17, 2017 at 16:37
Sorry for not giving you the error. Here is the error it is throwing back at me. pastiebin.com/58a7276751a6a — user6431119
– user6431119, Commented Feb 17, 2017 at 16:40
What does "breaking my javascript" mean? But why do you even need it? Just to return a -1 by default? Seems overkill. — Dave Newton
– Dave Newton, Commented Feb 17, 2017 at 16:40

Felix Kling · Accepted Answer · 2017-02-17 16:40:20Z

1

Extending built-in prototypes is bad practice. It can break scripts that expect that doesn't happen, such as jQuery.

There is no reason for you to do this. Create a normal function instead:

function getKey(obj, value) {
  // ...
}

and use getKey(playlistids, playing) instead of playlistids.getKey(playing).

answered Feb 17, 2017 at 16:40

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Collectives™ on Stack Overflow

object.prototype breaking javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related