0

Tenho uma função que é chamada toda vez que o elemento input está em foco, só que as chamadas são feitas com quantidade de parâmetros diferentes.

Como declarar a mesma função com passagem de parâmetros variáveis ?

input1.addEventListener("focus", function (){
    inputPlaceFocus(input1, ph1);
});
input2.addEventListener("focus", function (){
    inputPlaceFocus(input2, ph2, olho);
});

function inputPlaceFocus(input, ph, eye){
    if (input.value.length == 0){
        ph.style.transform = "translate(-6px, -20px) scale(.8)";
        ph.style.color = "deepskyblue";
        eye.style.visibility = "visible";
    }
};
var input1 = document.getElementById("mail");
var input2 = document.getElementById("pass");
var ph1 = document.querySelector("#ph1");
var ph2 = document.querySelector("#ph2");
var olho = document.querySelector(".fas");

3 Respostas 3

1

A declaração da função fica igual, o que tens de te preocupar é se esse elemento existe;

function inputPlaceFocus(input, ph, eye){
    if (input.value.length == 0) {
        ph.style.transform = "translate(-6px, -20px) scale(.8)";
        ph.style.color = "deepskyblue";
        if (eye) // < aqui, se o parametro nao for passado, a linha seguinte será ignorada
          eye.style.visibility = "visible";
    }
};
1

Na declaração da função ao invés de setar a quantidade de parâmetros de uma forma estática o que pode fazer é utilizar rest parameters, assim vc deixa a quantidade de parâmetros dinâmico, não importando a quantidade passada:

function inputPlaceFocus(...params) {
  return arguments.length
}

console.log(inputPlaceFocus(1,2,3))
console.log(inputPlaceFocus(1,2,3,4,5))
console.log(inputPlaceFocus(1,2))

0

Uma solução mais elegante

input1.addEventListener("focus", function (){
    inputPlaceFocus(input1, ph1);
});
input2.addEventListener("focus", function (){
    inputPlaceFocus(input2, ph2, olho);
});
// Defina o valor padrão, caso não seja passado por parâmetro
function inputPlaceFocus(input, ph, eye = undefined){
    if (input.value.length == 0){
        ph.style.transform = "translate(-6px, -20px) scale(.8)";
        ph.style.color = "deepskyblue";
        // faça um ternário, caso eye venha, ele atribui o "visible", caso não, undefined
        eye.style.visibility = eye ? "visible" : undefined;
    }
};

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .