2014-10-10 124 views
1

我有這個代碼,它會擦除​​您所在網站的html並將其複製到剪貼板。我目前有一個工作版本,當你點擊鉻圖標時複製文本,但我想添加更多的選項,所以我試圖在擴展彈出窗口中的按鈕點擊上運行腳本。Chrome擴展程序將不會運行按鈕單擊功能

不幸的是,我無法爲我的生活設法得到按鈕點擊發生的事情!當我用alert(「hi」)替換我的函數時,當我單擊擴展圖標而不是彈出窗口中的按鈕時,它會彈出警報。幫幫我!!!

document.addEventListener('DOMContentLoaded', function() { 
 
     document.getElementById("full_team").addEventListener('click', alert("HI"));;  
 
});
<body> 
 
\t <h2>Click to copy your roster</h2> 
 
\t <button id="full_team">Full Team</button> 
 
\t <script src="event.js"></script> 
 
</body>

+0

請進行【小例子(http://stackoverflow.com/help/mcve)一切與你所看到的行爲無關;你甚至可以在這個過程中自己解決問題。 – Xan 2014-10-10 13:39:10

+0

好吧,我添加了一個仍然不起作用的代碼片段。 – Emily 2014-10-10 14:16:59

+0

+1適當地做一個最小的例子。 – Xan 2014-10-10 14:32:16

回答

0

addEventListener期望事件名稱,並且應該被執行的功能的引用。

但是,alert("HI")不是對函數的引用。此語句執行警報,並返回undefined

有兩種方法來解決這個問題:

  1. 對於應執行短期功能,您可以使用匿名函數構造。聲明

    function(){ alert("HI"); } 
    

    不會執行警報,但會返回對調用時將執行警報的函數的引用。所以,你的代碼就變成了:

    document.getElementById("full_team").addEventListener('click', function() { 
        alert("HI"); 
    }); 
    
  2. 對於較長的功能,或可重複使用的功能,只是做了一個名爲功能:

    function sayHi() { 
        alert("HI"); 
    } 
    

    同樣,這個定義的函數,但是不執行它。然後,你可以使用函數的名稱:

    document.getElementById("full_team").addEventListener('click', sayHi); 
    

    一定要通過參考函數,而不是執行它:的重用功能

    // Wrong! 
    document.getElementById("full_team").addEventListener('click', sayHi()); 
    

說起,假設你想做一個參數相關函數。例如,假設您希望能夠根據哪個元素被按下而對各種人說「嗨」。

然後,你可以去更高水平,使返回功能的功能:通過去掉

function sayHiTo(name) { 
    return function() { 
    alert("Hi, " + name + "!"); 
    } 
} 

// Here, invoking the function is correct: it will return a function 
document.getElementById("full_team").addEventListener('click', sayHiTo("Bob")); 
+0

感謝您的回答,不幸的是,這聽起來像我的例子不是一個很好的最小例子,因爲我的真實代碼和其他努力確實通過了一個函數。首先嚐試:)如果我嘗試你的第二個例子,警報出現並消失在閃存中,任何想法爲什麼會發生?傳遞我的getTeam函數仍然沒有出現任何操作。 – Emily 2014-10-10 15:01:52

+0

好吧,然後嘗試調試你的代碼。要檢查彈出窗口,請右鍵單擊擴展按鈕並選擇「檢查彈出窗口」。 – Xan 2014-10-10 15:03:58

+0

當我使用SayHi函數和我自己的函數與彈出窗口交互時,控制檯日誌中沒有任何內容。我可以使用getElementById來查找我的按鈕,沒問題。我不確定該從哪裏出發,剛開始學習時:/ – Emily 2014-10-10 15:08:01

相關問題