ボタンの背景色を変更するボタンを設定するにはどうすればいいですか？

Question

私はa-dを押してボタン（a、b、c、d）を押すと色が変わるようにしようとしています。 'a'を押すと、aボタンは暗い色に変わります。例えば 'b'を押すと、 'a'は元の色に戻ります。そして、 'b'は暗い色になります これはおそらく最も効率的ではありませんが、私が考えることができる最も効率的な方法の1つです。

マイコード：

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>