Me gustaría configurar un .addEventListener cada vez que se selecciona cualquier barra de entrada con un clic ( focus ). Traté de orientarlo con getElementsByTagName('input') pero también con querySelectorAll() pero no funciona. El objetivo final es imprimir una alert cuando el campo se deja vacío. muchas gracias
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>Primero, debe llamar a getElementsByTagName en document , no document.document . document.document no es una cosa.
En segundo lugar, getElementsByTagName devuelve una matriz de elementos. Puede notar que Elements es plural aquí a diferencia getElementById . Con una matriz, debe seleccionar un elemento mediante el uso de un índice. Dado que desea que cada entrada tenga un oyente, puede iterar a través de la matriz con un bucle for... of .
Finalmente, el evento debe estar en minúsculas como focus , no 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>Sencillo que puedes hacer. necesitas explorar javascript más.
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>