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

[Dúvida] Parâmetros dentro das funções

Referente ao curso JavaScript: manipulando o DOM, no capítulo Montando uma peça e atividade Alterando vários componentes

por Anna Nayara de Alcântara Lira
| 138.3k xp | 37 posts

Durante o curso me veio uma dúvida, como o parâmetro dentro da função sabe que tem que "puxar a referência" do HTML. Por exemplo: Neste código CSS o parâmetro "operacao" não foi declarado, mas ele tem que ser exatamente igual a "+" para realizar a condição. Como ele sabe onde encontrar esse '+' para fazer a comparação sendo que "operacao" não está ligado a ninguém? Tipo, controle veio da classe do HTML '.controle-ajuste', mas 'operacao' não está declarado como nenhuma classe, e ele já compara com o elemento correto.

HTML (Coloquei apenas algumas das linhas do HTML)

Robotron ROBOTRON 2000 
    <section class="box estatisticas">
        <div class="estatistica">
            <p class="estatistica-titulo">Força</p>
            <div class="estatistica-valor">
                <p class="estatistica-numero">768</p>
            </div>
        </div>
        <div class="estatistica">
            <p class="estatistica-titulo">Poder</p>
            <div class="estatistica-valor">
                <p class="estatistica-numero">630</p>
            </div>
        </div>
        <div class="estatistica">
            <p class="estatistica-titulo">Energia</p>
            <div class="estatistica-valor">
                <p class="estatistica-numero">289</p>
            </div>
        </div>
        <div class="estatistica">
            <p class="estatistica-titulo">Velocidade</p>
            <div class="estatistica-valor">
                <p class="estatistica-numero">597</p>
            </div>
        </div>
    </section>

    <section class="equipamentos">
        <form action="" class="montador">
            <div class="box montador-conteudo">
                <div class="peca">
                    <label for="" class="peca-titulo">Braços</label>
                    <div class="controle">
                        <buttom class="controle-ajuste">-</buttom>
                        <input type="text" class="controle-contador" value="00" id="braco">
                        <buttom class="controle-ajuste">+</buttom>
                    </div>
                </div>
                <hr class="linha">
                <div class="peca">
                    <label for="" class="peca-titulo">Blindagem</label>
                    <div class="controle">
                        <buttom class="controle-ajuste">-</buttom>
                        <input type="text" class="controle-contador" value="00">
                        <buttom class="controle-ajuste">+</buttom>
                    </div>
                </div>
                <hr class="linha">

CSS:

const controle = document.querySelectorAll('.controle-ajuste')

controle.forEach( (elemento) => { elemento.addEventListener('click', (evento)=> { manipulaDados(evento.target.textContent, evento.target.parentNode) }) });

function manipulaDados(operacao, controle) { const peca = controle.querySelector('.controle-contador') if (operacao ==='+') { peca.value = Number(peca.value) + 1 } else { peca.value = Number(peca.value) - 1 } }

2 respostas
solução!
por Estudante
| 177.3k xp | 195 posts

Boa tarde Ana,

"...Como ele sabe onde encontrar esse '+' para fazer a comparação sendo que "operacao" não está ligado a ninguém?..."

Você chamou a sua função manipulaDados dentro do forEach passando dois parâmetros, e um deles é o valor "+" que está sendo referenciado aqui: evento.target.textContent

Se você der um console.log(evento.target.textContent), e clicar nos botões, verá o sinal "+" ou "-";

Quanto ao nome dos parâmetros de uma função, você pode dar qualquer nome, "a, b, x, numA, numB", tanto faz. Mas, é melhor informar um nome de fácil entendimento que a sua função espera receber, por exemplo:

// esses nomes de variáveis são horríveis, não da pra ter ideia do que eles irão armazenar, se fosse um código gigante.
    const variavelUm = 'Ana';
    const variavelDois = 'Lira';

// chamei a função passando as duas variaveis: 
    mostraNomeCompleto(variavelUm, variavelDois);

// Na função, escrevi o que eu espero que ela receba
    function mostraNomeCompleto(nome, sobrenome){
      alert(`${nome} ${sobrenome}`);
    }

O exemplo acima, é o mesmo caso que o seu código, tem as variáveis que fazem referencia há algum elemento do html, e durante o código foi extraído somente o texto/valor dele, no caso o "+" e "-", e isso é passado como parâmetro da sua função e "chega lá" assim:

    function manipulaDados(+ , outroParametro){
        if ('+' ==='+') {
          ...codigo;
        } 
    }

// Se você adicionar um console.log(operacao) dentro da função, verá que o operacao representa o "+" ou "-";

Informação adicional: Se quiser, também pode passar como parâmetro o nome das duas variáveis, mas, ficaria muito estranho e ilegível o que a função faz:

    function mostraNomeCompleto(variavelUm, variavelDois){
      alert(`${variavelUm} ${variavelDois}`);
    }
por Anna Nayara de Alcântara Lira
| 138.3k xp | 37 posts

Muito obrigada, fez total sentido e entendi o que estava questionando.