Uncaught ReferenceError: X n'est pas définie

Ce code est utilisé sur une Extension Chrome.
Quand j'appelle le "showOrHideYT ()", je reçois un "Uncaught ReferenceError: showOrHideYT n'est pas défini | (anonyme) | onclick".

Ce code sera à la recherche pour des liens youtube dans une page, et il va ajouter un bouton (c'est vraiment un div avec un événement) à côté du lien pour afficher l'iframe avec la vidéo intégrée, un peu comme Reddit Amélioration de la Suite. Considérez le code, en soi, incomplète. Je veux juste savoir ce qui me manque quand je l'appelle la "showOrHideYT(frameZES12345)".

si besoin, je peux fournir le manifeste.json.

Grâce

function showOrHideYT(id)
{
var YTvidWidth  = 420;
var YTvidHeight = 315;
frameYT=getElementById(id);
console.log(frameYT.style.visibility);
if (frameYT.style.visibility == "hidden")
{
frameYT.style.width = YTvidWidth+"px"; 
frameYT.style.height = YTvidHeight+"px"; 
frameYT.style.visibility = "visible";
}
if (frameYT.style.visibility == "visible")
{
frameYT.style.width = "0px"; 
frameYT.style.height = "0px"; 
frameYT.style.visibility = "hidden";
}
};
//DOM utility functions
function insertAfter( referenceNode, newNode ) {
if ((typeof(referenceNode) == 'undefined') || (referenceNode == null)) {
console.log(arguments.callee.caller);
} else if ((typeof(referenceNode.parentNode) != 'undefined') && (typeof(referenceNode.nextSibling) != 'undefined')) {
if (referenceNode.parentNode == null) {
console.log(arguments.callee.caller);
} else {
referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
}
}
};
function createElementWithID(elementType, id, classname) {
obj = document.createElement(elementType);
if (id != null) {
obj.setAttribute('id', id);
}
if ((typeof(classname) != 'undefined') && (classname != '')) {
obj.setAttribute('class', classname);
}
return obj;
};
///////////////////////////////////////
$(document).ready(function() {
var vidWidth    = 420;
var vidHeight   = 315;
var linksSemID  = document.getElementsByTagName("a") ;
for (var i = 0; i < linksSemID.length; i++){
if (/id=$/.test(linksSemID[i].href)) links[i].href += "1";
}
i=0;
var youTubeRegExp = /(?:v=)([\w\-]+)/g;                 
var forEach = Array.prototype.forEach;                  
var linkArray = document.getElementsByTagName('a');     
forEach.call(linkArray, function(link){                 
linkArray.id="zes" + i++;                           
var linkTarget = link.getAttribute('href');         
if (linkTarget!=null)                               
{
if (linkTarget.search(youTubeRegExp) !=-1)      
{
console.log (linkTarget);
idVideo=linkTarget.match(/(?:v=)([\w\-]+)/g);
//idVideo = idVideo.replace("v=", "");      
//add buton
botaoMais = document.createElement('DIV');
botaoMais.setAttribute('class','expando-button collapsed video');
botaoMais.setAttribute('onclick','showOrHideYT(frameZES'+ i +')');
insertAfter(link, botaoMais);
//add iframe
ifrm = document.createElement('IFRAME'); 
ifrm.setAttribute('src', 'http://www.youtube.com/embed/'+ idVideo); 
ifrm.style.width = '0px'; 
ifrm.style.height = '0px'; 
ifrm.style.frameborder='0px';
ifrm.style.visibility = 'hidden';
ifrm.setAttribute('id', 'frameZES' + i);
insertAfter(link, ifrm);
}
}
});  
});

OriginalL'auteur RSilva | 2012-01-17

  1. 6

    Lorsque vous utilisez setAttribute avec une chaîne, l'événement sera exécuté dans le contexte de la page. Les fonctions qui sont définies dans un Contenu de script à exécuter dans un bac à sable portée. Donc, vous devez passer une référence de fonction, au lieu d'une chaîne:

    Remplacer:

        botaoMais.setAttribute('onclick','showOrHideYT(frameZES'+ i +')');

    Avec:

        botaoMais.addEventListener('click', (function(i) {
return function() {
showOrHideYT("frameZES"+ i);
};
})(i));

    Explication du code:

    • (function(i) { ..})(i) est utilisé pour préserver la valeur de i pour chaque événement.
    • À l'intérieur de cette auto-invocation de fonction, une autre fonction est retourné, utilisé comme un écouteur d'événement à click.
    Aussi, même si vous souhaitez utiliser l'événement comme une chaîne de caractères ,frameZES a d'être cité. Sinon, le moteur de chercher une variable appelée frameZES, puis concaténer sa valeur avec i.
    merci Rob W, qui a résolu mon problème. Juste une petite faute de frappe sur votre suggestion: remplacez le [ pour un {, le dernier char de la 1ère ligne 😉

    OriginalL'auteur Rob W

  2. 1

    Je vois que vous êtes à l'aide de jQuery dans votre code. Personnellement, je pense que si nous voulons utiliser une librairie comme jQuery, alors on ne doit pas mélanger le natif de code javascript et jQuery.
    Vous pouvez utiliser jQuery lier lier votre les fonctions dont vous avez besoin à appeler les dom prêt.
    Lisez ci-dessous pour en savoir plus.

    supposons que vous voulez l'appeler une fonction javascript sur un clic de bouton, Voici le code HTML pour la même.

    <div id="clickme">
<input id= "clickmebutton" type="button" value = "clickme" />
</div>

    supposons que "test" est la fonction que vous voulez l'appeler, voici le code pour la fonction de test.

    function test() {
alert("hello");
}

    maintenant, vous avez besoin de lier la fonction de test sur le bouton cliquez sur.

    $(document).ready(function() {
$("#clickmebutton").bind("click", function(){
//do what ever you want to do here
test();
});
});

    OriginalL'auteur vaibhav