[Projeto] Resolvendo com estrutura condicional e função

Olá, para fins de acessibilidade e já praticando o tópico da próxima aula adicionei na marcação HTML do nosso pequeno aplicativo/desafio um role="button" para todos osinputs type="button" desde modo os leitores de tela conseguem identificar as teclas/botões, adiante:

No JS defini um array com os ID's válidos, em seguida defini uma função para capturar esse ID acessar o valor do elemento e atribuir esse valor ao input type="tel"que seria o visor do telefone na real.

Abaixo percorri todos os elementos da lista de teclas e adicionei ouvinte de eventos no caso o EventListener para observar quando o usuário clica sobre a tecla e disparar a função writeNumber, óbvio que antes faz a verficação do ID contido na tecla. (O código ficou mais verboso hehehe). Usei o método do array .include(valor) porém também funciona com .some((valor) => valor === idElement)), mas achei essa abordagem mais complexa por isso segui com o includes.

const telScreen = document.querySelector('#tel');
const listKeyboard = document.querySelectorAll('.keyboard');
const validIds = [
    'one',
    'two',
    'three',
    'four',
    'five',
    'six',
    'seven',
    'eight',
    'nine',
    'zero',
    'hash',
    'asterisk',
];

const writeNumber = (idElement) => {
    const telButton = document.querySelector(`.${idElement}`);
    telScreen.value += telButton.value;
};

for (let count = 0; count < listKeyboard.length; count++) {
    const keyboard = listKeyboard[count];
    const idKeyboard = keyboard.classList[1];

    keyboard.addEventListener('click', () => {
        if (!validIds.includes(idKeyboard)) {
            alert(`ID inválido, ID: ${idKeyboard}`);
            return
        }
        writeNumber(idKeyboard);
    });
}

Para ver como ficou: https://codepen.io/linusmanuel/pen/RweVjLY

Nota: tem duas teclas sem o seletor no html para testar o if.