Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Refatoração de código

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Boas Práticas com Javascript e atividade Quebrando o problema em partes menores

por Antonio José Pina Júnior
| 15.9k xp | 6 posts

Boa tarde pessoal! No tópico 8 do 5 Módulo, eu tentei refazer o código que já foi refatorado, pois imaginei poder enxugá-lo ainda mais, tirando a função anônima do código do curso.

<button class="botao">Calcula</button><input class="numero"><input class="tabuada"><span class="resultado"></span>
<script>

  function buscaElemento(seletor) {
    return document.querySelector(seletor);
  }


  function aplicaTabuada(numero, tabuada) {
    resultado.textContent = numero.value * tabuada.value;
    return resultado;
  }

  var botao = buscaElemento('.botao');
  var numero = buscaElemento('.numero');
  var tabuada = buscaElemento('.tabuada');
  var resultado = buscaElemento('.resultado');

  botao.addEventListener('click', aplicaTabuada);


</script>

Contudo, não consigo entender o pq o console estar retornando erro:

Uncaught TypeError: Cannot read properties of undefined (reading 'value') at HTMLButtonElement.aplicaTabuada (teste.html:10)

Obrigado!!

2 respostas
por Bernardo Schmitz dos Santos
| 96.4k xp | 67 posts
Programador

Acho que faltou passar os parâmetros aqui:

botao.addEventListener('click', aplicaTabuada);
botao.addEventListener('click', aplicaTabuada(numero, tabuada);
solução!
por Antonio José Pina Júnior
| 15.9k xp | 6 posts

Valeu por responder Bernardo. Eu tentei dessa forma mas, por algum motivo, a função está executando assim que a página carrega. Eu descobri o que estava acontecendo. 

function aplicaTabuada() {
      resultado.textContent = numero.value * tabuada.value;
      return resultado;
    }

Eu estava passando os parâmetros numero e tabuada na criação da função. Antes do clique, a função buscaElemento já associou ao elemento HTML, ou seja, já possui o valor do input antes do clique. Creio que, com os parâmetros, o código esteja buscando algo diferente do html do input, que já foi definido. Por isso, o undefined como retorno.