0

I am adding CSS classes to numerous <apex:inputFields>, that i am passing to the HTML <input> element using html-class="foo". Then i am iterating through them like this to change other properties using Eventhandlers (not displayed here) This is my code:

let inputs = document.getElementsByClassName("foo");
console.log(inputs); // returns HTMLCollection [] of Tags with class *foo*
console.log(inputs[0]); // returns undefined
  for (input of inputs) {
      console.log(input);
      let label = input.parentElement
                       .parentElement
                       .parentElement
                       .getElementsByTagName("label")[0];

      if (input.placeholder || input.value) {
          label.classList.add("is-floating");
      }
  }

This is where it gets interesting. I have tested this behavior using standard .html files and it works. However the input variable declared in the for/of loop does not return a value when run on a preview VisualForce page. In fact it does not display any result what so ever. While the inputs variable returns a HTMLCollection aka an array. I am beyond confused. Did i miss something? This code would work in vanilla JS run in chrome.

1 Answer 1

0

Alright, I figured it out. I had multiple problems here. The main one being that the DOM wasnt yet fully loaded when the function called. Which still kind of confuses me because window.onload should trigger when the document is ready, no? Cheers

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .