Oi, Afrânio, tudo bem?
De fato, vamos ver o que acontece quando adicionamos o código abaixo dentro da função passada para o eventoTecla.forEach()
:
botao.onclick = function () {
displayTelefone.value += botao.value
}
Esse código adiciona uma função que escuta o evento de clique para cada botão, e a função adiciona o número do botão ao valor do display. Se clicarmos em um botão, funciona normalmente.
Entretanto, o que devemos saber é que, na verdade, o evento onclick
também é disparado pelo botão se pressionarmos Enter ou Espaço nele! Esse é um comportamento dos navegadores para facilitar o nosso desenvolvimento. Por exemplo, em formulários, o evento onclick
irá servir para outras formas de submissão do formulário, daí não precisamos adicionar funções para diversos tipos de evento em um botão, como o clique, ou pressionar Enter ou Espaço.
Além disso, cada um dos seus botões também tem uma função que adiciona o número do botão ao display a partir do evento onkeydown
. Assim, a função do onkeydown
e a função do onclick
são ambas executadas quando pressionamos Espaço ou Enter em um dos botões, adicionando o número de forma duplicada.
Como o evento onclick
já abrange o caso de pressionar Enter e Espaço nos botões, nós podemos dispensar essa funcionalidade na função do evento onkeydown
, removendo o código displayTelefone.value += value;
:
botao.onkeydown = function (tecla){
if(tecla.code === 'Space' || tecla.code === 'Enter' ){
// código removido
}
}
Mas agora, não há nada dentro do bloco if
. Daí, vamos partir para a solução da atividade, e já respondendo sua segunda dúvida: vamos adicionar a classe ativa
para o botão, dentro desse if
:
botao.onkeydown = function (tecla){
if(tecla.code === 'Space' || tecla.code === 'Enter' ){
// código adicionado:
botao.classList.add('ativa');
}
}
Mas também precisamos remover a classe quando soltarmos a tecla do teclado, com o evento onkeyup
. Para isso, vamos adicionar o seguinte código:
botao.onkeyup = function () {
botao.classList.remove('ativa');
}
O código completo fica assim:
const eventoTecla = document.querySelectorAll('input[type=button]');
const displayTelefone = document.querySelector('input[type=tel]');
eventoTecla.forEach(botao => {
const value = botao.value;
botao.onclick = function () {
displayTelefone.value += botao.value
}
botao.onkeydown = function (tecla){
if(tecla.code === 'Space' || tecla.code === 'Enter' ){
botao.classList.add('ativa');
}
}
botao.onkeyup = function () {
botao.classList.remove('ativa');
}
});
Espero ter ajudado! Abraços e bons estudos :)