JavaScript: click on element by class not working

Question

I have simple JavaScript which may extend the element with class SLUZBY with an element with class EXTENDED-SLUZBY.

I need to have a working script on each element with class SLUZBY which will expand when the user clicks on it.

Is there any option on how I can make it as I wrote above?

var sluzba = document.getElementsByClassName('sluzba')
var extendedsluzba = document.getElementsByClassName('sluzba-extended')

sluzba.addEventListener('click', () => {
    extendedsluzba.classList.toggle('active')
})

.extended-sluzba {
display: none;
}

.extended-sluzba.active {
display: block;
}

<div class="sluzba">
  Sluzba01
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba02
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba03
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba04
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

getElementsByClassName returns an array of nodes, so you need to wrap the addEventListener and classList.toggle in a forEach loop — Seth Lutske
– Seth Lutske, Commented Jan 2, 2021 at 16:40

Akhilesh · Accepted Answer · 2021-01-02 16:45:33Z

1

You can use below code its working and tested.

var sluzba = document.querySelectorAll('.sluzba')
var extendedsluzba = document.querySelectorAll('.extended-sluzba')

sluzba.forEach((e, i) => {
  e.addEventListener('click', () => {
      extendedsluzba[i].classList.toggle('active')
  })
})

.extended-sluzba {
display: none;
}

.extended-sluzba.active {
display: block;
}

<div class="sluzba">
  Sluzba01
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba02
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba03
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba04
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

answered Jan 2, 2021 at 16:45

Akhilesh

9981 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Or Assayag · Accepted Answer · 2021-01-02 16:39:35Z

1

var sluzba = document.getElementsByClassName('sluzba') returns array of elements. Loop will do the trick:

var sluzba = document.getElementsByClassName('sluzba');
for (let i = 0; i < sluzba.length; i++) {
   sluzba[i].addEventListener('click', () => {
     extendedsluzba.classList.toggle('active');
   });
}

answered Jan 2, 2021 at 16:39

Or Assayag

6,39213 gold badges73 silver badges109 bronze badges

Collectives™ on Stack Overflow

JavaScript: click on element by class not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related