Chrome擴展程序-具有參數的js無法正常工作

Question

我一直在用js調用帶有參數的js擴展瀏覽器擴展代碼。

這是HTML文件

<!DOCTYPE html>
<html>
<head></head>
<body>
 <p id="demo">=a</p>
    <button type="button" id="do-count1">Count1</button>
    <button type="button" id="do-count2">Count2</button>  
  <script src="popup.js"></script>
</body>
</html>

由於chrome擴展名js必須分開

popup.js

var a=0;
 function count(k) {
     a = a + k;
     document.getElementById('demo').textContent = a;
}
document.getElementById('do-count1').onclick = count(2);
document.getElementById('do-count2').onclick = count(5);

當打開彈出窗口時，它會給出7，因為這2個功能會自動執行而無需單擊。 此外，按鈕不起作用。

有人問了類似的問題Chrome擴展程序彈出窗口不起作用，未處理點擊事件

但是我的問題向前推進了一步，因為我需要使用參數onclick調用js函數。

Answer 1

當前，您正在分配函數調用的結果，而不是函數引用。

您的選擇是：

使用bind（）創建一個函數包裝，該包裝將傳遞參數：
```
 element1.onclick = count.bind(null, 2); element2.onclick = count.bind(null, 5); 
```
注： this的onclick功能將會丟失這種方式。

或使用簡單的函數包裝器：

 element1.onclick = function() { count(2) }; element2.onclick = function() { count(5) };

注意：onclick函數的this部分將以這種方式丟失，以保留它：

 element1.onclick = function() { count.call(this, 2) }; element2.onclick = function() { count.call(this, 5) };

使用HTML屬性：

popup.html：

 <button type="button" id="do-count1" data-add="2">Count1</button> <button type="button" id="do-count2" data-add="5">Count2</button>

popup.js：

 function count() { document.getElementById('demo').textContent = a = a + this.dataset.add; } element1.onclick = count; element2.onclick = count;

Chrome擴展程序-具有參數的js無法正常工作

問題描述

1 個解決方案

解決方案1
0 2015-11-28 22:29:56

Chrome擴展程序-具有參數的js無法正常工作

問題描述

1 個解決方案

解決方案1 0 2015-11-28 22:29:56

解決方案1
0 2015-11-28 22:29:56