大型开关语句的替代方案

Question

I have bit of a problem. I have app with large amount of buttons that i wanna trigger on keyboard press. Currently i'm using switch statemnt for it, but as I want to get more and more buttons (about 25) switch statment gets larger and larger. How can I replace my switch statment and keep my functionality?

The code:

<button id="left_button" action-name="left" class="button"></button>
<button id="enter_button" action-name="enter" class="button"></button>
<button id="right_button" action-name="right" class="button"></button>
<button id="return_button" action-name="return" class="button"></button>
<button id="down_button" action-name="down" class="button"></button>

function animateButton(div_id) {
    
    div_id.classList.add("boxshadow");

    var data_action = div_id.getAttribute("action-name")
    
    //this sends data further down the pipeline
    RequestPress(data_action)

    setTimeout(function() {
        div_id.classList.remove("boxshadow");
    }, 400);

    
}

var up_button = document.getElementById('up_button')
var right_button = document.getElementById('right_button')
var left_button = document.getElementById('left_button')
var down_button = document.getElementById('down_button')
var enter_button = document.getElementById('enter_button')
var esc_button = document.getElementById('return_button')

document.addEventListener('keydown', function(e) {
        switch (e.keyCode) {
            case 38:
                animateButton(up_button)
                break;
            case 39:
                animateButton(right_button)
                break;
            case 40:
                animateButton(down_button)
                break;
            case 37:
                animateButton(left_button)
                break;
            case 13:
                animateButton(enter_button)
                break;
            case 27:
                animateButton(esc_button)
                break;
        }
});

note: I don't want to use jQuery

Answer 1

You can iterate through children of the wrapper div of these buttons and make a look up dictionary where key is name of the button and value is the id :

const el = document.getElementById("buttons").children;
const dict = Array.from(el).reduce((a, {id, name}) => ({...a, [name]: id}),{});

and inside the EventListener just look for the key already in the dictionary as:

document.addEventListener('keydown', function(e) {
  if (dict[e.keyCode]) {
    animateButton(document.getElementById(dict[e.keyCode]));
  }
});

Here is an example:

 const el = document.getElementById("buttons").children; const dict = Array.from(el).reduce((a, {id, name}) => ({...a, [name]: id}),{}); console.log(dict);

 <div id="buttons"> <button id="left_button" name=37 class="button"></button> <button id="right_button" name=39 class="button"></button> <button id="down_button" name=40 class="button"></button> </div>

Note: as you said you only have 25 buttons, so it's not a big deal for a modern machine to loop through 25 items.

Hope it helps!