Javascript 未捕获引用错误：未定义X

此代码正在Chrome扩展上使用。 当我调用

“showOrHideYT（）”

函数时，我得到一个

“未捕获引用错误：未定义ShowOrHideIt |（匿名 功能）| onclick“

这段代码将在页面中搜索youtube链接，并在链接旁边添加一个按钮（它实际上是一个带有事件的div），以显示带有嵌入式视频的iframe，非常类似于Reddit增强套件。考虑代码本身，不完整。我只想知道当我调用

showOrHideYT（frameZES12345）

函数时，我遗漏了什么

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

如果需要，我可以提供manifest.json

谢谢

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);
                
                }
            }
    });  

});

函数showOrHideYT（id）
{
var YTvidWidth=420；
var YTvidHeight=315；
frameYT=getElementById（id）；
log（frameYT.style.visibility）；
if（frameYT.style.visibility==“隐藏”）
{
frameYT.style.width=YTvidWidth+“px”；
frameYT.style.height=YTvidHeight+“px”；
frameYT.style.visibility=“可见”；
}
if（frameYT.style.visibility==“可见”）
{
frameYT.style.width=“0px”；
frameYT.style.height=“0px”；
frameYT.style.visibility=“隐藏”；
}
};
//DOM实用函数
函数insertAfter（referenceNode，newNode）{
if（（typeof（referenceNode）='undefined'）| |（referenceNode==null））{
log（arguments.callee.caller）；
}else if（（typeof（referenceNode.parentNode）！='undefined'）&（typeof（referenceNode.nextSibling）！='undefined'））{
if（referenceNode.parentNode==null）{
log（arguments.callee.caller）；
}否则{
referenceNode.parentNode.insertBefore（newNode，referenceNode.nextSibling）；
}
}
};
函数createElementWithID（elementType，id，classname）{
obj=document.createElement（elementType）；
如果（id！=null）{
obj.setAttribute（'id'，id）；
}
if（（typeof（classname）！=‘未定义’&&（classname！=“”））{
obj.setAttribute（'class'，classname）；
}
返回obj；
};
/////////////////////////////////////// 
$（文档）.ready（函数（）{
可变宽度=420；
高度=315；
var linksSemID=document.getElementsByTagName（“a”）；
对于（变量i=0；i

将

setAttribute

与字符串一起使用时，事件将在页面上下文中执行。内容脚本中定义的函数在沙盒作用域中执行。因此，必须传递函数引用，而不是字符串：

替换：

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

与：

代码说明：

• （函数（i）{..}）（i）

  用于为每个事件保留

  i

  的值
• 在这个自调用函数中，返回另一个函数，用作

  单击的事件侦听器

---

我看到您在代码中使用jQuery。我个人认为，如果我们使用像jQuery这样的库，那么就不应该混合使用本机javascript代码和jQuery代码。 您可以使用jQuery绑定来绑定需要在dom就绪时调用的函数。 阅读下面了解更多

假设您希望在单击按钮时调用javascript函数，下面是相同的HTML

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

现在需要在单击按钮时绑定测试函数

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

});

---

此外，即使要将事件用作字符串，也必须引用

frameZES

。否则，引擎将查找名为

frameZES

的变量，然后将其值与

i

连接起来。谢谢Rob W，这解决了我的问题。只是对您的建议有一点输入错误：将[替换为{，第1行的最后一个字符；）

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

});