I am building a form and I am trying to use the 'DRY' (don't repeat yourself) coding concept with this function I built. My goal is to use one function and put it on every label so when I type in the input field, it applies the styling to the field I am currently typing in.
Here is what I have now, I tried using a for loop previously and that applies the styling to each and every field at the same time and I can't have that. This function here only applies it to a single field so I'd have to recreate it every time for each input.
Also, I have this hooked up to a "onchange='newStyling(this)'" on a label in my HTML if that helps!
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>I guess you need to find the <label> next to the input, in your HTML they have a common parent div.custom_floating, trace up to the common parent and down to the label.
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>