Adding an event listener on load for floating label

Question

On page reloads I have floating labels overlapping the input text if the form has been filled out before. To avoid this problem I want to alter the input text's style if there is data in the form.

Here is my code:

https://codepen.io/holly-williford/pen/pONYYM

document.getElementsByClassName("floating").addEventListener("load", hideLabel);

function hideLabel() {
    if(!$('input').val() ) {
        $('floating').addClass('warning');
    } else {

    }
}


<label class="floating">Test</label>
<input></input> 

warning {
    color: red; 
}

Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Andreas, Aug 30 '18 at 17:30
Why are you using `.getElementsByTagName()` and `.addEventListener()` when you have jQuery? — Andreas, Aug 30 '18 at 17:30
A `` doesn’t trigger a `load` event. An `` doesn’t have a closing tag ``. `$("floating")` implies `` elements. You want `$(".floating")`. — Sebastian Simon, Aug 30 '18 at 17:34

score 1 · Accepted Answer · answered Aug 30 '18 at 17:42

There are many things from the codepen example that need changes.

HTML

<label class="floating">Test</label>
    <input> <!-- You should have a proper html tag -->

CSS

 .warning { //Notice the '.'
    color: red; 
  }

JS

    window.onload = hideLabel;
    function hideLabel() {
        if(!$('input').val() ) {
              $('.floating').addClass('warning'); // Notice the '.'
        } else {
         
        }
    }

These modifications should help you get started.

But, you have mentioned jQuery and you don't seem to make the most of it.

Adding an event listener on load for floating label

1 Answers1