帶函數的Vanilla 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（）函數在匿名就緒函數內部定義，因此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]';
    });
});