带有函数的香草 JavaScript，未定义函数

Question

$(function() {
 var script = document.createElement('script');
 script.id="filepicker";
 script.type="text/javascript";
 script.src="//api.filepicker.io/v1/filepicker.js";
 var body=document.querySelectorAll("body")[0]; ;
 body.appendChild(script);
 var ButtonsArea = document.querySelectorAll('.frm-buttons')[0];
 var textArea = document.getElementById('text_editor_textarea');
 var button = document.createElement('span');
 var divText=document.createTextNode("Upload File");
 button.id="newDoc";
 button.setAttribute("onclick","getPick()");
 button.appendChild(divText);
 ButtonsArea.appendChild(button);

  function getPick(){
   filepicker.setKey('AWpNcAmH9TmiWtEgHsFwBz');
   filepicker.pick({
    mimetypes: ['text/*'],
    services:['COMPUTER'],
    maxSize:50*1024
   },function(FPFile) {
     var docFile = FPFile.url;
     textArea.value=textArea.value+'[url]'+FPFile.url+'+'+FPFile.filename+'[/url]';
     });
  }
});

有人说我的 getPick() 函数没有定义是不是所有的 JavaScript 都缺少一些东西，也许 JavaScript 时间已经关闭，因为一切都是动态创建的？

Answer 1

问题在于，当您在另一个函数的范围内声明一个函数时，它仅限于该函数的范围。当您在元素的onclick 属性上调用getPick() 时，它会在全局范围内执行。 getPick 那里不存在。

您可以简单地将函数分配为onclick 属性：

button.onclick = getPick;

您可以使用addEventListener 增加代码的灵活性，如下所示：

button.addEventListener('click', getPick, false);

如果您愿意，这允许您在按钮上拥有多个click 处理程序，但它与旧版本的 Internet Explorer 不兼容。 button.onclick = 兼容几乎所有可以追溯到互联网历史悠久的浏览器！

请注意，在这两种情况下，您都使用getPick 而不是getPick()。前者是对函数的引用；后者执行函数并给你它的返回值。

Answer 2

getPick() 函数是在匿名 on-ready 函数中本地定义的，因此它对 onclick 处理程序不可见。

尝试将 getPick 函数移到 $(function() { }); 块之外。

或者，使用适当的事件处理，如下所示：

button.click(function() {
    filepicker.setKey('AWpNcAmH9TmiWtEgHsFwBz');
    filepicker.pick({
        mimetypes: ['text/*'],
        services:['COMPUTER'],
        maxSize:50*1024
    }, function(FPFile) {
        var docFile = FPFile.url;
        textArea.value=textArea.value+'[url]'+FPFile.url+'+'+FPFile.filename+'[/url]';
    });
});