Generic function js

Question

Good afternoon, I have a question related to creating a function for generic use in javascript, the function is this here:

   function calcular() {
      var_quant = 0;
      var valor = document.getElementById("valor").value;
      var quantidade = document.getElementById("quantidade").value;
      var quantidade_devolvida = 
      document.getElementById("quantidade_devolvida").value;


      if (quantidade_devolvida <= quantidade) {
        var var_quant = valor * quantidade_devolvida;
        document.getElementById("var_qnt").value = var_quant;
    }
}

I need to turn this function into a function that works in any input. Please if anyone could help me I really appreciate it.

Answer 1

To make a function dynamic, you need to use the values passed by reference within its function.

It would look like this:

function calcular(valor, quantidade, qt_devolvida, resultado) {
      var_quant = 0;
      var valor = document.getElementById(valor).value;
      var quantidade = document.getElementById(quantidade).value;
      var quantidade_devolvida = 
      document.getElementById(qt_devolvida).value;


      if (quantidade_devolvida <= quantidade) {
        var var_quant = valor * quantidade_devolvida;
        document.getElementById(resultado).value = var_quant;
    }
}

let button = document.getElementById('btn');
btn.addEventListener("click", function(){  
  calcular('valor', 'quantidade', 'quantidade_devolvida', 'var_qnt'); //chamada da função passando os ids dos elementos
})

<input type="text" id="valor" placeholder="Valor"/> <br><br>
<input type="text" id="quantidade" placeholder="Quantidade"/> <br><br>
<input type="text" id="quantidade_devolvida" placeholder="Quantidade devolvida"/> <br><br>
<input type="text" id="var_qnt" placeholder="Resultado" disabled/> <br> <br>
<button id="btn"> Calcular </button>

Note: Remember to pass the valores function in the correct order.

Answer 2

You can use parameters in the function, this way:

function calcular(valor, quantidade, quantidade_devolvida) {
   var var_quant = 0;
   if (quantidade_devolvida <= quantidade) {
     var_quant = valor * quantidade_devolvida;
   }
   return var_quant;
}

And then you can use it as follows:

document.getElementById("var_qnt").value = calcular(
                                          document.getElementById("valor").value,
                                          document.getElementById("quantidade").value,
                                          document.getElementById("quantidade_devolvida").value);

So you can pass inputs from anywhere and centralize output calculation.

EDITION

Or you can use an object as well, to pass the values to the function:

function calcular(objeto) {
   objeto.var_quant = 0;
   if (objeto.quantidade_devolvida <= objeto.quantidade) {
     objeto.var_quant = objeto.valor * objeto.quantidade_devolvida;
   }
}

var seu_objeto = {
    valor : document.getElementById("valor").value,
    quantidade : document.getElementById("quantidade").value,
    quantidade_devolvida : document.getElementById("quantidade_devolvida").value,
    var_quant : 0
};

calcular(seu_objeto);
document.getElementById("var_qnt").value = seu_objeto.var_quant;