Why does onclick not work on a button but works on a DIV in Google Chrome extension

I've decided to dabble in writing a Google Chrome extension. I'm looking through the samples and writing my own versions. I've downloaded set_page_color and I'm writing my own version of it.

Can someone tell me why this doesn't work

<button onclick="click(this)" id="red">Red</button>

when this does

<div onclick="click(this)" id="red">Red</div>

I'm happy to use a div if I must but I don't see why I need to. Especially since the Google Analytics tutorial uses buttons for their javascript triggers.

If you need more code let me know.

Edit

Here i开发者_如何学编程s the code from google's set_page_color popup.html (bits are missing that I'm sure aren't relevant)

<script>
function click(color) {
    chrome.tabs.executeScript(null,
        {code:"document.body.style.backgroundColor='" + color.id + "'"});
    window.close();
}
</script>
<div onclick="click(this)" id="red">red</div>
<div onclick="click(this)" id="blue">blue</div>
<div onclick="click(this)" id="green">green</div>
<div onclick="click(this)" id="yellow">yellow</div>

Here's their manifest file

{
    "name": "A browser action with a popup that changes the page color.",
    "version": "1.0",
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ],
    "browser_action": {
        "default_title": "Set this page's color.",
        "default_icon": "icon.png",
        "popup": "popup.html"
    }
}

That's all there is to it. If you change the <div onclick= ... to <button onclick=... it doesn't work.

The issue is that click is a property on <button> DOM elements, but not on <a> DOM elements. Rename your method and it should work just fine.