Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Alura-fone (não entendi muito bem)

Olá. Recentemente estava assistindo o curso de JS e uma das atividade é fazer com que os números do botão apareçam no input, porém não consegui entender parte o código de um dos colegas do fórum. Como eu não consegui resolver, recorri à algumas soluções no fórum. Achei uma, porém não entendi

const teclas = document.querySelectorAll("input[type=button]");

for (let i=0; i < teclas.length; i++)
  teclas[i].addEventListener('click', myFunc);

function myFunc() 
{
    const valor = this.value;
    const display = document.querySelector("input[type=tel]");
    display.value += valor;
}

Este é o código, mas eu não entendi e adoraria que alguém pudesse me explicar cada linha, se possível. Também, outra dúvida que tive, foi que o código funcionou perfeitamente mesmo sem o fechamento das chaves da estrutura de repetição for. É alguma tolerância da linguagem JavaScript?

5 respostas
    const teclas = document.querySelectorAll("input[type=button]");

Nessa primeira linha, a referencia de todos os inputs do tipo button são capturadas e armazenadas na constante teclas.

for (let i=0; i < teclas.length; i++)
  teclas[i].addEventListener('click', myFunc);

Como o querySelectorAll() retorna uma lista de elementos, uma NodeList para ser mais exato, o conteúdo armazenado na constante teclas é uma lista. Por isso está sendo usado um laço for para acessar cada um dos itens desta lista, ou seja, cada botão, e adicionar um evento de click.

function myFunc() 
{
    const valor = this.value;
    const display = document.querySelector("input[type=tel]");
    display.value += valor;
}

O evento de click está chamando a função myFunc, que é responsável por capturar o valor do botão clicado e armazena na constante valor, capturar a referencia do input do tipo tel e armazenar na constante display e concatenar o conteúdo da constante valor ao valor do input referenciado pela constante display.

Expliquei bem por cima, então se ainda precisar de ajuda é só falar.

1- O senhor explicou super bem, mas ainda me resta dúvidas referente a função. Certo, entendi, ao apertar no botão uma função será acionada, mas a const valor, ele recebe qual valor? O significado desse "this.value" refere-se a quê? /////////////// Não só isso, mas a display.value += valor; está somando ou substituindo quais valores?

solução!

Certo, a constante valor recebe o valor do botão que foi clicado, o texto deste botão. Tipo, se o botão clicado tiver o texto '4', este será o valor armazenado. Esse this.value se refere a valor do próprio botão, o valor do botão que acionou o evento. No momento que você aciona o evento a partir dele, o this serve de referencia ao próprio elemento que está acionando o evento. Já quanto esse display.value += valor, se trata de uma soma de strings. É o mesmo que display.value = display.value + valor;

Cara, meu muito obrigado. Depois que o senhor falou: "a constante recebe o valor do botão clicado". Minha cabeça ficou mais leve e comecei a compreender melhor. Meu muito obrigado :)

Fico feliz em ajudar! Boa sorte nos estudos e sempre que tiver algum problema pode contar com o fórum, aqui a comunidade é grande e disposta a ajudar.