Curious on how to target more than one class with same function-CodePudding

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>

CodePudding user response：

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>