1
resposta

Faça como eu fiz. Desafio 03 e dúvidas

Consegui fazer percorrer todo o código, porém como faço pra adicionar a função de clicar e adicionar o valor ao input tel? Quando fiz isso com o onclick deu certo, porém ao usar o tecla o valor era dobrado.

Dúvida dois. Como faço pra adicionar o ".ativa" em um input sem classe? pois quando aperto enter ele não altera a cor.

const eventoTecla = document.querySelectorAll('input[type=button]');
const displayTelefone = document.querySelector('input[type=tel]');


    eventoTecla.forEach(botao => {

        const value = botao.value;

        botao.onkeydown = function (tecla){
            if(tecla.code === 'Space' || tecla.code === 'Enter' ){
                displayTelefone.value  += value;
            }
        }



    });
1 resposta

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 :)