2015-01-26 197 views
0

我想在點擊按鈕加載以下功能:功能不響應按鈕點擊

<button onclick="generateUpload()">Upload</button> 



<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> 

<script type="text/javascript"> 
function generateUpload() 
{ 

    // The Browser API key obtained from the Google Developers Console. 
     var developerKey = 'ID'; 

     // The Client ID obtained from the Google Developers Console. 
     var clientId = 'ID'; 

     // Scope to use to access user's photos. 
     var scope = ['https://www.googleapis.com/auth/photos']; 

     var pickerApiLoaded = false; 
     var oauthToken; 

     // Use the API Loader script to load google.picker and gapi.auth. 
     function onApiLoad() { 
     gapi.load('auth', {'callback': onAuthApiLoad}); 
     gapi.load('picker', {'callback': onPickerApiLoad}); 
     } 

     function onAuthApiLoad() { 
     window.gapi.auth.authorize(
      { 
       'client_id': clientId, 
       'scope': scope, 

       'immediate': true 
      }, 
      handleAuthResult); 
     } 

     function onPickerApiLoad() { 
     pickerApiLoaded = true; 
     createPicker(); 
     } 

     function handleAuthResult(authResult) { 
     if (authResult && !authResult.error) { 
      oauthToken = authResult.access_token; 
      createPicker(); 
     } 
     } 

     // Create and render a Picker object for picking user Photos. 
     function createPicker() { 
     if (pickerApiLoaded && oauthToken) { 
      var picker = new google.picker.PickerBuilder(). 
       enableFeature(google.picker.Feature.MULTISELECT_ENABLED). 
       addView(google.picker.ViewId.PDFS). 
       setOAuthToken(oauthToken). 
       setDeveloperKey(developerKey). 
       setCallback(pickerCallback). 
       build(); 
      picker.setVisible(true); 
     } 
     } 

     // A simple callback implementation. 
     function pickerCallback(data) { 
     var url = 'nothing'; 
     if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) { 
      var doc = data[google.picker.Response.DOCUMENTS][0]; 
      url = doc[google.picker.Document.URL]; 
       var message = 'The following(s) were stored in Parse: ' + url; 
     document.getElementById('result').innerHTML = message; 

     } 
     } 

     addOnOnApiLoadedCallback(onApiLoad); // register API load 
} 

var gapi_loaded = false, gapi_buffered_callbacks = []; 
function onApiLoad() { // this function gets called by the Google API 
    gapi_loaded = true; 
    // run buffered callbacks 
    for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) { 
     gapi_buffered_callbacks(); 
    } 
} 
function addOnOnApiLoadedCallback(callback) { 
    if (gapi_loaded) { 
     callback(); // api is loaded, call immediately 
    } else { 
     gapi_buffered_callbacks.push(callback); // add to callback list 
    } 

} 

</script> 

但是它不響應並顯示在控制檯上沒有錯誤。任何幫助將不勝感激。我不確定它是如何被調用的,但在控制檯上不顯示任何錯誤,所以我不確定問題出在哪裏。該按鈕在主體中找到,並在腳本中找到腳本。

更新: 下面是整個代碼:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script> 

    <script src="angular.js"></script> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
<!--======================================================================--> 
<!--Custom website css file is linked here--> 
<link href="css/style1.css" rel="stylesheet"> 
<!--Font Awesome CSS link--> 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 


<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> 

<script type="text/javascript"> 
function generateUpload() 
{ 

    // The Browser API key obtained from the Google Developers Console. 
     var developerKey = 'ID'; 

     // The Client ID obtained from the Google Developers Console. 
     var clientId = 'ID'; 

     // Scope to use to access user's photos. 
     var scope = ['https://www.googleapis.com/auth/photos']; 

     var pickerApiLoaded = false; 
     var oauthToken; 

     // Use the API Loader script to load google.picker and gapi.auth. 
     function onApiLoad() { 
     gapi.load('auth', {'callback': onAuthApiLoad}); 
     gapi.load('picker', {'callback': onPickerApiLoad}); 
     } 

     function onAuthApiLoad() { 
     window.gapi.auth.authorize(
      { 
       'client_id': clientId, 
       'scope': scope, 

       'immediate': true 
      }, 
      handleAuthResult); 
     } 

     function onPickerApiLoad() { 
     pickerApiLoaded = true; 
     createPicker(); 
     } 

     function handleAuthResult(authResult) { 
     if (authResult && !authResult.error) { 
      oauthToken = authResult.access_token; 
      createPicker(); 
     } 
     } 

     // Create and render a Picker object for picking user Photos. 
     function createPicker() { 
     if (pickerApiLoaded && oauthToken) { 
      var picker = new google.picker.PickerBuilder(). 
       enableFeature(google.picker.Feature.MULTISELECT_ENABLED). 
       addView(google.picker.ViewId.PDFS). 
       setOAuthToken(oauthToken). 
       setDeveloperKey(developerKey). 
       setCallback(pickerCallback). 
       build(); 
      picker.setVisible(true); 
     } 
     } 

     // A simple callback implementation. 
     function pickerCallback(data) { 
     var url = 'nothing'; 
     if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) { 
      var doc = data[google.picker.Response.DOCUMENTS][0]; 
      url = doc[google.picker.Document.URL]; 
       var message = 'The following(s) were stored in Parse: ' + url; 
     document.getElementById('result').innerHTML = message; 

     } 
     } 

     addOnOnApiLoadedCallback(onApiLoad); // register API load 
} 

var gapi_loaded = false, gapi_buffered_callbacks = []; 
function onApiLoad() { // this function gets called by the Google API 
    gapi_loaded = true; 
    // run buffered callbacks 
    for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) { 
     gapi_buffered_callbacks(); 
    } 
} 
function addOnOnApiLoadedCallback(callback) { 
    if (gapi_loaded) { 
     callback(); // api is loaded, call immediately 
    } else { 
     gapi_buffered_callbacks.push(callback); // add to callback list 
    } 

} 

</script> 





</head> 
<body > 



           <button onclick="generateUpload()">Upload</button> <br/> <br/> 



    </body> 
</html> 
+0

控制檯添加和斷點調試....哪裏 – epascarello 2015-01-26 19:29:37

+0

你會建議我加入吧。爲了您的禮貌,我已將整個頁面代碼添加到我的初始文章 – Jon 2015-01-26 19:31:58

+0

的更新部分中。在您調用的函數內部開始,而不是將其添加到其他調用的方法中。找出停止的地方。 – epascarello 2015-01-26 19:34:35

回答

1

generateUpload您聲明功能,但你不從什麼地方調用它們。我認爲你應該刪除所有這些功能,並讓他們從generateUpload內部調用。例如

function generateUpload() 
    { 

     // The Browser API key obtained from the Google Developers Console. 
      var developerKey = 'ID'; 

      // The Client ID obtained from the Google Developers Console. 
      var clientId = 'ID'; 

      // Scope to use to access user's photos. 
      var scope = ['https://www.googleapis.com/auth/photos']; 

      var pickerApiLoaded = false; 
      var oauthToken; 

      // Use the API Loader script to load google.picker and gapi.auth. 
      //just call the function   
      onApiLoad(); 

      //call the rest of your functions 
    } 

外的generateUpload實現oauthToken功能

function onApiLoad() { 
     gapi.load('auth', {'callback': onAuthApiLoad}); 
     gapi.load('picker', {'callback': onPickerApiLoad}); 
     } 
+0

非常感謝你的建議。我有問題重新格式化我的代碼,以遵循單一的負責任的原則。你可以進一步擴展你以前的答案嗎? – Jon 2015-01-26 21:31:25

+1

不知道你想要實現什麼,但是是一個很好的實踐來打破一個大功能,像我建議的小功能。 – vbouk 2015-01-26 21:57:01

+0

感謝您的建議,我想這個網頁會解釋更多的問題。如果你能夠善意地研究它,那將會有所幫助,因爲我一直在爲此苦苦掙扎。 http://stackoverflow.com/questions/27862865/calling-function-within-a-function-javascript – Jon 2015-01-26 22:45:37