CODEWITHSUNDEEP
javascripthtmlcss
Ahmed Radi
Ahmed Radi

Reputation: 787

How can select all spans in the same div using js

I have code that can select only the first span in code when I use getElementsByTagName I get an error

TypeError: Failed to execute 'insertBefore' on 'Node': parameter 2 is not of type 'Node'. at HTMLDivElement.

now anyone can help me to select all spans in the card also I have a lot of card contain spans

const last = document.getElementById('last'); // define parent contain all cards

last.addEventListener("click", (event)=>      // add click event in parent
  {
  if(event.target.tagName === 'I')            // Write 'I' not 'i'tag name must be upper case
    {
    const icon = event.target;                       // define the target element
    const card = icon.parentNode;
    if(icon.getAttribute('value') === 'remove')      // get attribute from i element to remove target card
      {
      last.removeChild(card);                        // remove target card
      }
    else if(icon.getAttribute('value') === 'edit')   // get attribute from i element to edit target card
      {
      const span      = card.firstElementChild;
      const input     = document.createElement('input');  // create input text to carry span value and can edit it
      input.type      = 'text';                           // add type to input
      input.value     = span.textContent;                 // take the text from span to the input
      card.insertBefore(input, span);                     // change the place between input and span
      card.removeChild(span);                             // remove span and add input in the same place
      icon.className  = 'fa fa-check-circle';             // change icon from 'fa-edit' to 'fa-check-circle' to change icon shape
      icon.setAttribute('id','green-color');              // change ID from 'edit' to 'green-color' to make icon have green color when hover on it
      icon.setAttribute('value','');                      // remove value from icon to enter in the next 'if else'
      }
    else if(icon.getAttribute('value') === '')
      {
      const input      = card.firstElementChild;
      const span       = document.createElement('span'); // create span to carry the input value
      span.textContent = input.value;                    // take the text from input to the span
      card.insertBefore(span, input);                    // change the place between input and span
      card.removeChild(input);                           // remove span and add input in the same place
      icon.className   = 'fa fa-edit';                   // change icon from 'fa-check-circle' to 'fa fa-edit' to change icon shape
      icon.setAttribute('id','');                        // remove ID 'green-color' to make icon have blue color when hover on it
      icon.setAttribute('class','fa fa-edit edit');      // change ID from 'green-color' to 'edit' to make icon have green color when hover on it
      icon.setAttribute('value','edit');                 // Make value 'edit' to enter in first 'if else' condation
      }
    }
  })


<div class="row last" id="last">
  <h4 class="exam-header col-12">Schedule of exams dates</h4>
  <a class="exam-info teacher-link text-md-center col-8" id="teacher-link" href="#">
    <span class="subject subject-name">Computer Science</span>
    <span class="subject subject-date">2021/12/2</span>
    <span class="subject subject-time">9:00 AM</span>
    <span class="subject subject-duration">2h</span>
    <i class="fa fa-edit edit" value="edit"></i>
    <i class="fa fa-times remove" value="remove"></i>
  </a>
  <a class="exam-info teacher-link text-md-center col-8" id="teacher-link" href="#">
    <span class="subject subject-name">Computer Science</span>
    <span class="subject subject-date">2021/12/2</span>
    <span class="subject subject-time">9:00 AM</span>
    <span class="subject subject-duration">2h</span>
    <i class="fa fa-edit edit" value="edit"></i>
    <i class="fa fa-times remove" value="remove"></i>
  </a>
</div>

Upvotes: 0

Views: 962

Answers (2)

Mahmoud Y3c
Mahmoud Y3c

Reputation: 94

  • if you wants to try it by getElementsByTagName or ClassName you can try the following
var div = document.getElementsByTagName("div")[0]
var spans = div.getElementsByTagName("span");
for(let i = 0; i < spans.length; i++) {
  spans[i].innerText = 123;
}

Upvotes: 0

Dan Levy
Dan Levy

Reputation: 1263

There's a better way to listen to events on multiple div/cards. Get a reference to the element holding all the cards, listen to clicks on that.

const cardContainer = document.querySelector('div.card-list');
cardContainer.addEventListener("click", (event) => {
  const clickedElement = event.target;
  // put your event logic here - might need to verify the 'target' is the expected element.
});

Another trick to keep in mind is to use querySelectorAll to get multiple matches, then loop over them:

const allSpans = document.querySelectorAll('div span');

allSpans.forEach((span) => {
    // do stuff with the span 
})

Upvotes: 1

Related Questions