Intento realizar un formulario animado con HTML CSS y JS. Todo parece estar bien exceptuando el código de JS que no parece añadir una clase de CSS cuando debería hacerlo y no encuentro el error. Este es el código de JS.
var inputs = document.getElementsByClassName('formulario_input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('keyup', function(){
if(this.value.length>=1) {
this.nextElementSibling.classList.add('fijar');
} else {
this.nextElementSibling.classList.remove('fijar');
}
});
}
Todos los estilos de CSS se ven bien incluso la transición de cuando estas rellenando el formulario. Aquí dejo algún estilo.
.formulario_label {
padding-left: 15px;
position: absolute;
margin-top: -85px;
z-index: -20;
color: rgba(0,0,0,0.5);
transition: all 0.2s;
}
Por lo que lo único que puede estar dando algún fallo tiene que ser el código de JS. Y por lo que creo debería de ser con el .nextElementSibling por que al intentar imprimir el .parentNode me da undefined pero no entiendo el por que si este es el HTML.
<form action="" class="formulario">
<h1 class="formulario_titulo">Contáctenos</h1>
<input type="text" class="formulario_input">
<label for="" class="formulario_label">Nombres</label>
<input type="text" class="formulario_input">
<label for="" class="formulario_label">Correo</label>
Muchísimas gracias de antemano.