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

Como utilizar uma função com parâmetros utilizando inputs?

Referente ao curso JavaScript: programando na linguagem da web

por Higor Nascimento das Chagas
| 26.5k xp | 7 posts

Estou praticando funções no javaScript.

Utilizando uma função sem parâmetro, eu consigo realizar a soma de dois números digitados em um input HTML sem dificuldade. A minha dúvida começou a surgir quando eu comecei a utilizar parâmetro nas funções. Não entendi muito bem como utilizar funções com parâmetros junto com campos de textos HTML.

Não sei se tenho que criar um EventListener de click nesse caso de funções com parâmetros.

Se alguém puder dar uma esclarecida nessas dúvidas.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    <input type="text" name="primeiro-numero" id="soma1" placeholder="Digite o primeiro número">
    <input type="text" name="segundo-numero" id="soma2" placeholder="Digite o segundo número">
    <input type="button" value="Exibir soma" id="btn-exibir-soma">


    <script>

        function somar(n1, n2) {
            var primeiroNumero = document.getElementById("soma1");
            var segundoNumero = document.getElementById("soma2");


        }

    </script>
</body>
</html>
2 respostas
solução!
por Danilo Sales
| 384.9k xp | 70 posts
Analista desenvolvedor Senior

Vamos lá, literalmente função com parametro recebem parametros, pegando o seu exemplo acima vou alterar o seu código e comentar que acho que fica mais fácil de você entender.

var primeiroNumero = document.getElementById("soma1");
var segundoNumero = document.getElementById("soma2");

//Soma os inputs da tela e imprime
somar(primeiroNumero, segundoNumero);

//Soma numeros quaisquer
somar(20, 30);

//Aqui você cria a sua função, os parametros você vai 
//utilizar dentro da sua função, fazendo isso você pode ter
//varias chamadas que executam essa função de somar.
function somar(n1, n2) {
    console.log(n1 + n2);
}

Não sei se ficou claro para você, mas basicamente você cria a função e passa os parametros para que ela faça seu trabalho.

No caso do clique do botão, você deve criar uma função normal sem parametros e associar ao click, dentro desta função você faz a chamada para outras funções:

function clicouBotao() {
    var primeiroNumero = document.getElementById("soma1");
    var segundoNumero = document.getElementById("soma2");
    somar(primeiroNumero, segundoNumero);
}
por Higor Nascimento das Chagas
| 26.5k xp | 7 posts

Valeu Danilo!!! Fiquei dois dias pra conseguir entender hahaha, mas eu consegui fazer o código funcionar. Muito obrigado pela explicação!