Looking for help with modal working with JS on website

[mrozmaksymilian]

Hi Guys!

I’ve got a problem with simple modal which I’m doing right now. This modal is Kevin Powells modal from YT guide, but I changed it a little but it’s not working now → my HTML looks like this:

<seciton class="doctor-cards" id="doctor-cards">
               <div class="card js os-animation" data-os-animation="bounceInUp" data-os-animation-delay="0.08s">                       
                              <div class="img-box">
                                   <img src="img/ona.png" alt="Doktor xyz">
                              </div>
                              <div class="card-content">
                                   <h2>xyz<br><span></span></h2>
                                   <p>xyz</p>
                              </div>                            
               </div>          
               <div class="medimed-modal">
                         modal is here ;)
               </div>
</section>

and my JS is:

const cardsContainer = document.querySelector('.doctor-cards')

cardsContainer.addEventListener('click', e => {
     e.preventDefault()

     const modalToggle = e.target.closest('.img-box')

     if (!modalToggle) return

     const modal = modalToggle.parentNode.nextElementSibiling
     console.log(modal)
})

I’m trying go to .medimed-modal div, which is my modal → img-box is a photo, card content is slide up :hover smth on which is text with informations. I want to work like this: I’m clicking on photo with hover effect and it’s creating my variable modal from my JS → in this very moment console log in chrome says its undefined.

If its not enough informations just let me know

[DaveMaxwell]

You have a typo in the original post. If that’s in your markup, it might be part of the problem…

<seciton class="doctor-cards" id="doctor-cards">

should be…

<section class="doctor-cards" id="doctor-cards">

[mrozmaksymilian]

Thanks It helped a little but unfortunately did not solve the problem → it’s look like in my JS(after little change):

const cardsContainer = document.querySelector('.doctor-cards')

cardsContainer.addEventListener('click', e => {

     const modalToggle = e.target.closest('.card-content')

     if (! modalToggle) return

     const modal = modalToggle.parentNode.nextElementSibiling
     console.log(modal)
})

this part with .nextElementSibiling isn’t working → when i cut it off, chrome console shows me parent div → so jump to next sibiling is not working only, but why?

[mrozmaksymilian]

OK…
It’s next typo…
Next time I’ll be closely check all characters
cheers!

ps for those blind guys like me: I’d got .nextElementSibiling it should be Sibling