2017-08-27 39 views
0

我也跟着這樣的:https://jsfiddle.net/gevorgha/fbeof421/Clipoboard.js不是抄襲秒 - 小白

這是我的html文件:

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
    [...]  
    <script type="text/javascript" src="{{ url_for('static', filename='js/clipboard.min.js') }}"></script> 
     <script> 
      new Clipboard('.btn'); 
     </script> 

    <body> 



    <!-- Target --> 
    <div id="bar">Mussum ipsum cacilds...</div> 

    <!-- Trigger --> 
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar"> 
    Copy to clipboard 
</button> 



     </body> 
    </html> 

我沒有與

"{{ url_for('static', filename='js/clipboard.min.js') }}" 

我有任何問題在我的瀏覽器控制檯中出現此錯誤:

clipboard.min.js:7 Uncaught TypeError: Cannot read property 'addEventListener' of null 
    at o (clipboard.min.js:7) 
    at c (clipboard.min.js:7) 
    at o (clipboard.min.js:7) 
    at e.t [as listenClick] (clipboard.min.js:7) 
    at new e (clipboard.min.js:7) 
    at (index):13 
o @ clipboard.min.js:7 
c @ clipboard.min.js:7 
o @ clipboard.min.js:7 
t @ clipboard.min.js:7 
e @ clipboard.min.js:7 
(anonymous) @ (index):13 

jsfiddle示例,因爲它是作品,而不是我的。你有什麼主意嗎 ?

+1

在開發環境中使用unminified JavaScript文件來幫助調試是個好習慣。 – Jarzon

回答

0

JavaScript在調用它之前需要已經創建按鈕。由於Head是完成的html代碼的第一部分,這意味着它會嘗試調用尚未創建的按鈕。

放置腳本在調用正文底部的按鈕的地方,將確保該按鈕在腳本嘗試調用之前創建。