Si selecciono mi elemento de tramo por ID, se ejecuta, pero quiero seleccionar varios elementos de tramo. Intenté con la clase y el nombre, pero tampoco funcionó.
const uname = document.getElementById('fname') const form = document.getElementById('form') const errorElement = document.getElementById('formerror') form.addEventListener('submit', (e) = \ > { let messages = \ [\] if (uname.value === '' || uname.value == null) { messages.push("Name is required") } if (messages.length\ > 0) { e.preventDefault() errorElement.innerHTML = messages.join(', ') } }) <div id="error"> <form name="signupform" action="signupdetails.php" method="get" id="form"> <input type="text" class="text" placeholder="Username" id="fname"><b><span id="formerror"></span></b> <input type="text" class="text" placeholder="Roll:no" name="froll"><b><span id="formerror"></span></b> <input type="email" class="text" placeholder="Email" id="femail"><b><span id="formerror"></span></b> <i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i> <input type="password" class="text" placeholder="Password" id="password1" name="fpass"> <i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i> <input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass"> <button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br> </form> </div>Una id debe ser única en todo el documento, consulte https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
Use una clase en sus elementos span y consúltelos con document.querySelectorAll('.formerror') .
const uname = document.getElementById('fname') const form = document.getElementById('form') const errorElements = document.querySelectorAll('.formerror') console.log(errorElements) <div id="error"> <form name="signupform" action="signupdetails.php" method="get" id="form"> <input type="text" class="text" placeholder="Username" id="fname"><b><span class="formerror"></span></b> <input type="text" class="text" placeholder="Roll:no" name="froll"><b><span class="formerror"></span></b> <input type="email" class="text" placeholder="Email" id="femail"><b><span class="formerror"></span></b> <i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i> <input type="password" class="text" placeholder="Password" id="password1" name="fpass"> <i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i> <input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass"> <button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br> </form> </div>Acabo de tener un problema algo similar a este, y como otros ya han mencionado. Deberá cambiar este fragmento de código a continuación en su javascript
document.getElementById('formerror')en su lugar
document.querySelectorAll(".formerror") // Be sure to also change from and ID to instead using classes for the form errorAdemás, dado que los ID solo deben usarse una vez, intentar asignarlos y usarlos más de una vez no debería funcionar, ya que están destinados a ser exclusivos de un elemento. Entonces, esta es la razón por la que debería hacer la transición para agregarlos como clases.
Ahora, en cuanto a cuando intenta acceder a sus elementos de intervalo mediante Javascript, ya que hay más de un elemento de intervalo. Deberá asegurarse de utilizar la función "querySelectorAll", ya que esto le permitirá orientar todos sus elementos de intervalo. De lo contrario, si usa solo "querySelector", solo se aplicará al primer elemento de intervalo, mientras que los otros dos elementos de intervalo no se verán afectados.
Espero que esto pueda ayudar a agregar un poco de información y aclarar algunas cosas para usted.
Primero cambie la identificación a un atributo de clase, porque la identificación debe ser única para todo el documento.
<span class="formerror"></span> Luego, en lugar de usar document.getElementById() , use document.querySelectorAll(".formerror") .
Resolverá tu problema.