鼠标单击JavaScript错误

Question

I can't seem to get the mousedown mouseup's to work. i need an object to change color on mouse down and on mouseup change back to the original. but for some reason

onload = init;

function init() {
    document.getElementsByClassName("buttons")[0].mousedown = function () {
        blue();
    };
    document.getElementsByClassName("buttons")[0].mouseup = function () {
        green();
    };
}

function green() {
    document.getElementsByClassName("buttons")[0].style.backgroundColor = "#360"
}

function blue() {
    document.getElementsByClassName("buttons")[0].style.backgroundColor = "blue"
};

Answer 1

Why do you need javascript to do this? Why not just use ":active" in CSS?

button{background-color: green}
button:active{background-color: blue}

Answer 2

Event names include on prefix: it's onmousedown and onmouseup :

function init() {
    document.getElementsByClassName("buttons")[0].onmousedown = blue;
    document.getElementsByClassName("buttons")[0].onmouseup = green;
}