Targeting multi input inside a form for addEventListener-CodePudding

I would like to set up an .addEventListener every time any input bar is selected with a click (focus). I tried to target it with getElementsByTagName('input') but also with querySelectorAll() but it does not work.. The final goal is to print an alert when the field is left empty. many thanks

document.document.getElementsByTagName('input').addEventListener('Focus', function () {
    console.log("on focus")
})

   <form action="" class="signUp">
        <ul>
          <li>
            <!-- <label for="fname"></label> -->
            <input type="text" onfocus="this.value=''" id="fname" name="user_name" placeholder="First Name">
          </li>
          <li>
            <!-- <label for="lname"></label> -->
            <input type="text" onfocus="this.value=''" id="lname" name="user_name" placeholder="Last Name">
          </li>
          <li>
            <!-- <label for="email"></label> -->
            <input type="email" onfocus="this.value=''" id="email" name="user_email" placeholder="Email Address">
          </li>
          <li>
            <!-- <label for="password"></label> -->
            <input type="password" onfocus="this.value=''" id="password" name="password" placeholder="Password">
          </li>
          <li class="button">
            <button type="submit" id="buttonClaim">CLAIM YOUR FREE TRIAL</button>
          </li>
        </ul>
      </form>

CodePudding user response：

First, you need call getElementsByTagName on document, not document.document. document.document isn't a thing.

Second, getElementsByTagName returns an array of elements. You might notice that Elements is plural here unlike getElementById. With an array, you need to select one element by using an index. Since you want every input to have a listener, you can iterate through the array with a for... of loop.

Finally, the event needs to be lowercase like focus, not Focus

for (let v of document.getElementsByTagName('input')) {
  v.addEventListener('focus', function() {
    console.log("on focus")
  });
}

<form action="" class="signUp">
  <ul>
    <li>
      <!-- <label for="fname"></label> -->
      <input type="text" onfocus="this.value=''" id="fname" name="user_name" placeholder="First Name">
    </li>
    <li>
      <!-- <label for="lname"></label> -->
      <input type="text" onfocus="this.value=''" id="lname" name="user_name" placeholder="Last Name">
    </li>
    <li>
      <!-- <label for="email"></label> -->
      <input type="email" onfocus="this.value=''" id="email" name="user_email" placeholder="Email Address">
    </li>
    <li>
      <!-- <label for="password"></label> -->
      <input type="password" onfocus="this.value=''" id="password" name="password" placeholder="Password">
    </li>
    <li class="button">
      <button type="submit" id="buttonClaim">CLAIM YOUR FREE TRIAL</button>
    </li>
  </ul>
</form>

CodePudding user response：

Simple you can do. you need to explore javascript more.

window.onload = function(){
    var tempobj = document.querySelectorAll('input');
    for(var i=0;i<tempobj.length;i  )
    {
        tempobj[i].addEventListener('focus', function (elem) {
            console.log("on focus: " elem.target.name);
        });         
    }
}

<form action="" class="signUp">
  <ul>
    <li>
      <!-- <label for="fname"></label> -->
      <input type="text" onfocus="this.value=''" id="fname" name="user_name" placeholder="First Name">
    </li>
    <li>
      <!-- <label for="lname"></label> -->
      <input type="text" onfocus="this.value=''" id="lname" name="user_name" placeholder="Last Name">
    </li>
    <li>
      <!-- <label for="email"></label> -->
      <input type="email" onfocus="this.value=''" id="email" name="user_email" placeholder="Email Address">
    </li>
    <li>
      <!-- <label for="password"></label> -->
      <input type="password" onfocus="this.value=''" id="password" name="password" placeholder="Password">
    </li>
    <li class="button">
      <button type="submit" id="buttonClaim">CLAIM YOUR FREE TRIAL</button>
    </li>
  </ul>
</form>