CODEWITHSUNDEEP
javascripthtml
Mohammed muzammil
Mohammed muzammil

Reputation: 1

How can I select multiple span elements?

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" 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>

Upvotes: 0

Views: 1201

Answers (3)

user18451098
user18451098

Reputation:

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.

Upvotes: 1

Dante1021
Dante1021

Reputation: 374

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

<span class="formerror"></span>

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

It will solve your problem.

Upvotes: 0

jonas
jonas

Reputation: 627

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" 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>

Upvotes: 2

Related Questions