如何设置按钮以更改按钮的背景色

Question

我正在尝试使其能够按广告，并且按钮（a，b，c，d）会改变颜色； 当我按下“ a”时，a按钮应该变成较深的颜色，例如，如果我按下“ b”，则“ a”应该变回其原始颜色。 “ b”将变成较深的颜色，这可能不是最有效的，但它是我能想到的最有效的方法之一。

我的代码：

document.addEventListener("keydown", function(event) {
    if(event.keyCode == 65)
    {
        document.getElementById("a1").style.background='#BFBFBF';
        document.getElementById("b1").style.background='#FFFFFF';
        document.getElementById("c1").style.background='#FFFFFF';
        document.getElementById("d1").style.background='#FFFFFF';
    }
    else if(event.keyCode == 66)
    {
        document.getElementById("b1").style.background='#BFBFBF';
        document.getElementById("c1").style.background='#FFFFFF';
        document.getElementById("d1").style.background='#FFFFFF';
        document.getElementById("a1").style.background='#FFFFFF';
    }
    else if(event.keycode == 67)
    {
        document.getElementById("c1").style.background='#BFBFBF';
        document.getElementById("d1").style.background='#FFFFFF';
        document.getElementById("a1").style.background='#FFFFFF';
        document.getElementById("b1").style.background='#FFFFFF';
    }
    else if(event.keycode == 68)
    {
        document.getElementById("d1").style.background='#BFBFBF';
        document.getElementById("a1").style.background='#FFFFFF';
        document.getElementById("b1").style.background='#FFFFFF';
        document.getElementById("c1").style.background='#FFFFFF';
    }
});

document.addEventListener("keyup", function(event) {
    if(event.keyCode == 65)
    {
        event01()
    }
    else if(event.keyCode == 66)
    {
        event02()
    }
    else if(event.keycode == 67)
    {
        event03()
    }
    else if(event.keycode == 68)
    {
        event04()
    }
});

Answer 1

 ~function () { var opts = { 65: { button: "a1", handler: eventA }, 66: { button: "b1", handler: eventB }, 67: { button: "c1", handler: eventC }, 68: { button: "d1", handler: eventD } }; document.addEventListener("keydown", function (event) { var cur = opts[event.keyCode]; cur && (document.getElementById(cur.button).style.background='#BFBFBF'); }); document.addEventListener("keyup", function (event) { var cur = opts[event.keyCode]; if (cur) { document.getElementById(cur.button).style.background = ''; cur.handler(); } }); function eventA() {} function eventB() {} function eventC() {} function eventD() {} }(); 

 button { background: white; } 

 <button id=a1>a</button> <button id=b1>b</button> <button id=c1>c</button> <button id=d1>d</button>