onclick 不适用于 Chrome 扩展程序？答案

【问题标题】：onclick not working for Chrome Extension?onclick 不适用于 Chrome 扩展程序？
【发布时间】：2014-05-09 09:41:33
【问题描述】：

我正在尝试为 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，并且不会像应有的那样增加。

非常感谢！！

【问题讨论】：

标签： javascript html google-chrome-extension

【解决方案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>

【讨论】：

如果它符合您的需要，您可以投票回答并将问题设置为已回答..

【解决方案2】：

唯一需要改变的是

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

到

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

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

【讨论】：