How can I select multiple span elements?-CodePudding

If I select my span element by ID it gets executed but I want to select multiple span elements. I tried with class and name but it also not working.

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"  placeholder="Username" id="fname"><b><span id="formerror"></span></b>
    <input type="text"  placeholder="Roll:no" name="froll"><b><span id="formerror"></span></b>
    <input type="email"  placeholder="Email" id="femail"><b><span id="formerror"></span></b>
    <i  aria-hidden="true" id="icon1"></i>
    <input type="password"  placeholder="Password" id="password1" name="fpass">
    <i  aria-hidden="true" id="icon2"></i>
    <input type="password"  placeholder="Confirm Password" id="password2" name="fcpass">
    <button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
  </form>
</div>

CodePudding user response：

An id should be unique in the entire document, see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute

Use a class on your span elements and query them with 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"  placeholder="Username" id="fname"><b><span ></span></b>
    <input type="text"  placeholder="Roll:no" name="froll"><b><span ></span></b>
    <input type="email"  placeholder="Email" id="femail"><b><span ></span></b>
    <i  aria-hidden="true" id="icon1"></i>
    <input type="password"  placeholder="Password" id="password1" name="fpass">
    <i  aria-hidden="true" id="icon2"></i>
    <input type="password"  placeholder="Confirm Password" id="password2" name="fcpass">
    <button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
  </form>
</div>

CodePudding user response：

Just had a somewhat similar issue to this, & as others have already mentioned. You will want to change this snippet of code below in you're javascript

document.getElementById('formerror')

To instead

document.querySelectorAll(".formerror") // Be sure to also change from and ID to instead using classes for the form error

Also as ID's are only meant to be used once, trying to assign them and use them more than once should not work as they are meant to be unique to one element. So this is why you should instead transition to adding them as classes instead.

Now as for when you are trying to access you're span elements by Javascript, since there is more than one span element. You will need to ensure that you use the "querySelectorAll" function as this will allow you to target all of you're span elements. Otherwise if using just the "querySelector" it will only apply to the first span element, while the other two span elements remain un affected.

Hope this could help to add a bit of insight and clear some things up for you.

CodePudding user response：

First change the id to a class attribute, because the id should be unique to the entire document.

<span ></span>

Then Instead of using document.getElementById(), use document.querySelectorAll(".formerror").

It will solve your problem.