Estoy creando un formulario y estoy tratando de usar el concepto de codificación 'DRY' (no se repita) con esta función que construí. Mi objetivo es usar una función y ponerla en cada etiqueta, de modo que cuando escribo en el campo de entrada, aplique el estilo al campo en el que estoy escribiendo actualmente.
Esto es lo que tengo ahora, intenté usar un bucle for previamente y eso aplica el estilo a todos y cada uno de los campos al mismo tiempo y no puedo tener eso. Esta función aquí solo se aplica a un solo campo, por lo que tendría que volver a crearla cada vez para cada entrada.
Además, tengo esto conectado a "onchange='newStyling(this)'" en una etiqueta en mi HTML si eso ayuda.
function newStyling(that) { if (that.value != null && that.value != "") { document.getElementsByClassName('label')[0].style.opacity = "0.65"; document.getElementsByClassName('label')[0].style.transform = "scale(0.85) translateY(-0.5 rem) translateX(0.15 rem)"; } } <div class="col-md-3"> <div class="custom_floating mb-3"> <span> <input type="text" class="" id="firstname" placeholder="First Name" onchange="newStyling(this)"> </span> <label for="floatingFirstName" class="label">First Name <span style="color: red;">*</span></label> <!-- <nlfirstname></nlfirstname> --> </div> </div> <script> document.getElementById("firstname").setAttribute("placeholder", "First Name"); document.getElementById("firstname").setAttribute("class", "form-control"); document.getElementById("firstname").setAttribute("id", "floatingFirstName"); </script> <!-- Last Name Input --> <div class="col-md-3"> <div class="custom_floating mb-3"> <span> <input type="text" class="" id="lastname" placeholder="" onchange="newStyling(this)"> <!-- <nllastname></nllastname> --> </span> <label for="floatingFirstName" class="label">Last Name <span style="color: red;">*</span></label> </div> </div> <script> document.getElementById("lastname").setAttribute("placeholder", "Last Name"); document.getElementById("lastname").setAttribute("class", "form-control"); document.getElementById("lastname").setAttribute("id", "floatingFirstName"); </script>Supongo que necesita encontrar el <label> al lado de la entrada, en su HTML tienen un padre común div.custom_floating , rastrear hasta el padre común y bajar hasta la etiqueta.
function newStyling(that) { if (that.value != null && that.value != "") { that.closest('.custom_floating').querySelector('.label').style.opacity = "0.65"; that.closest('.custom_floating').querySelector('.label').style.transform = "scale(0.85) translateY(-0.5 rem) translateX(0.15 rem)"; } } <div class="col-md-3"> <div class="custom_floating mb-3"> <span> <input type="text" class="" id="firstname" placeholder="First Name" onchange="newStyling(this)"> </span> <label for="floatingFirstName" class="label">First Name <span style="color: red;">*</span></label> <!-- <nlfirstname></nlfirstname> --> </div> </div> <script> document.getElementById("firstname").setAttribute("placeholder", "First Name"); document.getElementById("firstname").setAttribute("class", "form-control"); document.getElementById("firstname").setAttribute("id", "floatingFirstName"); </script> <!-- Last Name Input --> <div class="col-md-3"> <div class="custom_floating mb-3"> <span> <input type="text" class="" id="lastname" placeholder="" onchange="newStyling(this)"> <!-- <nllastname></nllastname> --> </span> <label for="floatingFirstName" class="label">Last Name <span style="color: red;">*</span></label> </div> </div> <script> document.getElementById("lastname").setAttribute("placeholder", "Last Name"); document.getElementById("lastname").setAttribute("class", "form-control"); document.getElementById("lastname").setAttribute("id", "floatingFirstName"); </script>