Accessing dom elements exercise

Question

I need your help on accessing dom elements. Basically i have a slider with bullets and i want to log the text content of the selected slide every time i click on a bullet.

under my ul i have two elements: a div that contains another div having a class of "flickity-slider" and an ol

I initially started with this script but realized that it would turn all the dots to class "is-selected"

 var dots = document.querySelectorAll('.dots'); var slide = document.querySelectorAll('.slide'); Array.prototype.forEach.call(dots, edot=>{ Array.prototype.forEach.call(slide, eslide=>{ if (edot.className = 'dot is-selected') { if (eslide.className = 'slide is-selected') { console.log(eslide.textContent); } } }); }); 

 <div class="slider text-center" data-paging="true" data-children="3"> <ul class="slides flickity-enabled is-draggable" tabindex="0"> <div class="flickity-viewport" style="height: 362.797px;"> <div class="flickity-slider" style="left: 0px; transform: translate3d(-296.79%, 0px, 0px);"> <li class="slide is-selected" style="position: absolute; left: 300%;"> <img alt="Image" src="img/cowork-8.jpg"> <h5>Gotham Rounded Light</h5> <p> Gotham Rounded is a technical letter that<br>goes from scale. </p> </li> <li class="slide" style="position: absolute; left: 100%;"> <img alt="Image" src="img/cowork-10.jpg"> <h5>Highlighting data<br></h5> <p> We were required to use a lot of graphics. This was extremely challenging, for it is no easy tasks. </p> </li> <li class="slide" style="position: absolute; left: 200%;"> <img alt="Image" src="img/cowork-11.jpg"> <h5>Initial Design</h5> <p><b>For</b> <b>our</b> <b>first</b> <b>design,</b> we chose a light-colored background to bring out the shadows of the graphics and illustrations.</p> </li> </div> </div> <ol class="flickity-page-dots"> <li class="dot is-selected"></li> <li class="dot"></li> <li class="dot"></li> </ol> </ul> </div> 

help would be appreciated. Hope i was clear

saw a previous comment about the queryselector - I just updated it

Answer 1

Something like this where you log the relevant slide based on the index of the dots:

const slides = document.querySelectorAll('.slide')
const dots = document.querySelectorAll('.dot')

Array.from(dots).forEach((dot, index) => {
   dot.onclick = () => {
    console.log(slides[index].textContent)
  }
 })

So if you click on dot/bullet number 1, you would log the content of slide number 1.