Как я могу переключать активные кнопки калькулятора с помощью клавиатуры evenlisteners?

#event-listener

#прослушиватель событий

Вопрос:

window.addEventListener(‘keydown’, (e) => {

 e.preventDefault();

let userInput = e.key;

let button = document.querySelectorAll('button');

switch (userInput) {
    

default:
            userInput = e.key;
            break;
        case 'Escape':
            calculator.clear();
            calculator.updateDisplay();

            button[0].style.background = 'black';
            break;
        case 'Backspace':
            calculator.delete();
            node.updateDisplay();

            button[1].style.background = 'black';
            break;
        case '/':
            calculator.chooseOperation('÷');
            calculator.updateDisplay();
            button[2].style.background = 'black';
            break;
        case '1':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[3].style.background = 'black';
            break;
        case '2':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[4].style.background = 'black';
            break;
        case '3':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[5].style.background = 'black';
            break;
        case '*':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[6].style.background = 'black';
            break;
        case '4':
            calculator.chooseOperation(userInput);
            calculator.updateDisplay();
            button[7].style.background = 'black';
            break;
        case '5':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[8].style.background = 'black';
            break;
        case '6':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[9].style.background = 'black';
            break;
        case ' ':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[10].style.background = 'black';
            break;
        case '7':
            calculator.chooseOperation(userInput);
            calculator.updateDisplay();
            button[11].style.background = 'black';
            break;
        case '8':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[12].style.background = 'black';
            break;
        case '9':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[13].style.background = 'black';
            break;
        case '-':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[14].style.background = 'black';
            break;
        case '.':
            calculator.chooseOperation(userInput);
            calculator.updateDisplay();
            button[15].style.background = 'black';
            break;
        case '0':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[16].style.background = 'black';
            break;
        case 'Enter':
            calculator.appendNumber(userInput);
            calculator.updateDisplay();
            button[17].style.background = 'black';
            break;
        case 'Enter':
            calculator.compute();
            calculator.updateDisplay();
            button[18].style.background = 'black';
            break;
}
  

});

 window.addEventListener('keyup', (e) => {
e.preventDefault();
let userInput = e.key;
let button = document.querySelectorAll('button');
  

переключатель (ввод пользователя) {
По умолчанию:
userInput = e.key;
перерыв;
регистр «Escape»:
кнопка [0].style.background = ‘rgba(255, 255, 255, 0.75)’;
перерыв;
регистр ‘Backspace’:
кнопка [1].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘/’:
кнопка [2].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘1’:
кнопка [3].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘2’:
кнопка [4].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘3’:
кнопка [5].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘*’:
кнопка [6].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘4’:
кнопка [7].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘5’:
кнопка [8].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘6’:
кнопка [9].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘ ‘:
кнопка [10].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘7’:
кнопка [11].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘8’:
кнопка [12].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘9’:
кнопка [13].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘-‘:
кнопка [14].style.background = ‘rgba(255, 255, 255, 0.75)’;
перерыв;
case ‘.’:
кнопка [15].style.background = ‘rgba(255, 255, 255, 0.75)’;
разрыв;
регистр ‘0’:
кнопка [16].style.background = ‘rgba(255, 255, 255, 0.75)’;
перерыв;
регистр «Ввод»:
кнопка [17].style.background = ‘rgba(255, 255, 255, 0.75)’;
перерыв;
}
});