Question

我正在尝试为Google Chrome创建扩展程序，并且onclick方法似乎无法正常工作。我有一个html文件popup.html：

<!DOCTYPE html>
<html>
<body>
<p id="demo">Before clicking button</p>
<button type="button" id="thing">Pls work</button>
<script src="popup.js"></script>
</body>
</html>

JavaScript文件popup.js：

var a =0;
function myFunction()
{
    a= a +1;
    document.getElementById('demo').textContent=a;
}
document.getElementById('thing').onclick = myFunction();

最后，一个清单文件：

{
  "name": "Hello World!",
  "version": "1.0",
  "manifest_version": 2,
  "description": "My first Chrome extension.",
  "browser_action": {
    "default_icon": "shark.png",
    "default_popup": "popup.html"
  }
}

当我将此扩展程序加载到Chrome上，然后点击扩展程序时，它会显示一个直接显示“1”的扩展程序窗口，而不是“单击按钮之前”消息。然后，当我尝试单击按钮时，没有任何反应 - 也就是说，文本保持为1，并且不会像应该的那样增加。

非常感谢!!

Answer 1

试试这个：

JS：

 window.onload = function() {
    var a =0;
    function myFunction()
    {
        a= a +1;
        document.getElementById('demo').textContent=a;
    }
    document.getElementById('thing').onclick = myFunction;
}

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<p id="demo">Before clicking button</p>
<button type="button" id="thing">Pls work</button>
</body>
</html>

Answer 2

唯一需要改变的想法是

document.getElementById('thing').onclick = myFunction();

到

document.getElementById('thing').onclick = myFunction;

第一个on执行函数，而不是设置要为onclick事件执行的函数。

onclick不适用于Chrome扩展程序？

2 个答案: