Olá. Estou no capítulo 5 e estou com dúvidas quanto a este. Nesta parte o instrutor passou sobre como deixar o código mais semântico, sobre criar funções para poder diminuir de 15 linhas de código para apenas 5. Enfim, o que eu não entendo é como posso fazer isso em outras situações. Fazendo junto com o instrutor explicando, está dando certo, consigo entender. Mas em algumas outras situações, já não...
Por exemplo o exercício da atividade 8, tinhamos este código:
<button class="botao">Calcula</button>
<input class="numero">
<input class="tabuada">
<span class="resultado"></span>
var botao = document.querySelector('.botao');
var numero = document.querySelector('.numero');
var tabuada = document.querySelector('.tabuada');
var resultado = document.querySelector('.resultado');
botao.addEventListener('click', function() {
resultado.textContent = numero.value * tabuada.value;
});
Eu sei que tenho um botão que deve calcular o número * a tabuada e dar o resultado. E no javascript, ele está pegando a informação de cada campo e jogando nas suas variáveis, e após isto, ele adiciona um evento ao botão, que a partir do click, ele traz o resultado. Até aí, ok!
Porém, deveriamos de organizar ele. E conforme a opinião do instrutor, o resultado esperado seria este:
<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) {
return numero * tabuada;
}
var botao = buscaElemento('.botao');
var numero = buscaElemento('.numero');
var tabuada = buscaElemento('.tabuada');
var resultado = buscaElemento('.resultado');
botao.addEventListener('click', function() {
resultado.textContent = aplicaTabuada(numero.value, tabuada.value);
});
</script>Aí que complicou, não estou entendendo o porque e o que ele esta fazendo. E como chegou neste ponto.
