Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Function JavaScript

por Rodolfo Ferreira
| 157.8k xp | 16 posts

Olá pessoal,

Estou editando o CSS usando JS. Estou criando uma animação em um input de login, onde o texto que está disfarçado de placeholder fica no centro, mas quando clico ele sobe. Meu script funciona, porém ele não retorna ao estado anterior quando eu clico em outro lugar.

let loginFormEmailInput = document.querySelector('.login__form-email-input')
let loginFormEmailLabel = document.querySelector('.login__form-email-label')

let loginFormSenhaInput = document.querySelector('.login__form-senha-input')
let loginFormSenhaLabel = document.querySelector('.login__form-senha-label')

loginFormEmailInput.addEventListener('click',deslocaLabelEmail)
loginFormSenhaInput.addEventListener('click',deslocaLabelSenha)


function deslocaLabelEmail(){
    loginFormEmailLabel.style.paddingTop = "0px"
}
function deslocaLabelSenha() {
    loginFormSenhaLabel.style.paddingTop = "0px"

}

Dessa forma toda vez que eu tiver que fazer uma animação tenho que escrever uma nova função, então para refatorar o script pensei em algo assim: 

let loginFormEmailInput = document.querySelector('.login__form-email-input')
let loginFormEmailLabel = document.querySelector('.login__form-email-label')

let loginFormSenhaInput = document.querySelector('.login__form-senha-input')
let loginFormSenhaLabel = document.querySelector('.login__form-senha-label')

loginFormEmailInput.addEventListener('click',desloca)
loginFormSenhaInput.addEventListener('click',desloca)

function desloca (elemento){
    elemento.style.paddingTop = "0px"
}

desloca(loginFormEmailLabel)
desloca(loginFormSenhaLabel)

Assim eu teria apenas uma função e várias chamadas, porém assim ao carregar a página a animação de mover o texto já acontece, nem preciso clicar no input. Tem alguma forma de criar uma função genérica e fazer várias chamadas? Ou até mesmo uma forma de colocar todas animações em uma função.

Abraço.

1 resposta
solução!
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Rodolfo, tudo bem?

Desculpe a demora em te responder!

Uma forma de resolver isso é usar o conceito de closures em JavaScript. Closures são funções que retornam outras funções e mantêm o escopo da função externa, permitindo que as funções internas acessem as variáveis da função externa.

No seu caso, você pode criar uma função genérica que recebe como parâmetros o input e o label correspondentes e retorna uma função que faz a animação. Dessa forma, você pode chamar essa função para cada input e label que precisar animar.

Segue um exemplo de como ficaria o código:

function animaLabel(input, label) {
  let deslocaLabel = function() {
    label.style.paddingTop = "0px";
  }

  input.addEventListener('click', deslocaLabel);
  input.addEventListener('blur', function() {
    label.style.paddingTop = "";
  });
}

let loginFormEmailInput = document.querySelector('.login__form-email-input');
let loginFormEmailLabel = document.querySelector('.login__form-email-label');
animaLabel(loginFormEmailInput, loginFormEmailLabel);

let loginFormSenhaInput = document.querySelector('.login__form-senha-input');
let loginFormSenhaLabel = document.querySelector('.login__form-senha-label');
animaLabel(loginFormSenhaInput, loginFormSenhaLabel);

Nesse exemplo, a função animaLabel recebe como parâmetros o input e o label correspondentes, cria uma função deslocaLabel que faz a animação e adiciona event listeners para o click e blur do input. No evento blur, a função remove o padding do label para que ele volte ao estado anterior.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!