Question 340688 in Html Question posted in
Some basic documentation can be found here.

Html – JS, span selecting returns empty list

I’m making a js code for my website that will contain multiple slideshows. In order to do this, I had to change my code and suddenly it isn’t working anymore.

let dots = document.getElementById("slideshow" + String(slideshow)).getElementsByClassName("circle");

This should select all the span elements in the following HTML code:

<div class="slideshow">
  <div id="slideshow0">
    <a class="back" onclick="changeSlide(-1, 0)">❰</a>
    <div class="slides">
      <img src="../../img/IMG_3729.JPG" id="img_1" alt="Large tortoiseshell hanging on a wooden pillar." />
    </div>
    <div class="slides">
      <img src="../../img/IMG_4770.JPG" id="img_2" alt="Macro of a drowned lesser stag beetle." />
    </div>
    <div class="slides">
      <img src="../../img/IMG_5229.JPG" id="img_3" alt="Black and yellow Volkswagen beetles in a lightbox." />
    </div>
    <div class="slides">
      <img src="../../img/IMG_5696.JPG" id="img_4" alt="Domestic pigeon behind a brick wall." />
    </div>
    <a class="next" onclick="changeSlide(1, 0)">❱</a>
  </div>
  <div class="points">
    <span class="circle" onclick="goToSlide(1, 0)"></span>
    <span class="circle" onclick="goToSlide(2, 0)"></span>
    <span class="circle" onclick="goToSlide(3, 0)"></span>
    <span class="circle" onclick="goToSlide(4, 0)"></span>
  </div>
</div>
</div>

When I log this in the console it prints out an empty list. I dont know why.
I also have this line:

let slides = document.getElementById("slideshow" + String(slideshow)).getElementsByClassName("slides");

This works fine. the first part (document.getElementById("slideshow" + String(slideshow))) works, it is the second part that isn’t working (.getElementsByClassName("circle")).

I tried using a JQuery selector, but this also returned an empty list.

I also tried to remove the "points" div, but this didn’t solve the problem.

Last but not least I tried to first select the "points" div and then the circles, still with an empty list.

Thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    "You have an extra </div> after <a class="next" onclick="changeSlide(1, 0)">&#10097;</a>. That ends the slideshow0 div, so .circle isn't in the div. – Barmar"

    Thanks, I overlooked it


  2. 0

    Try using this:

    let dots = document.querySelectorAll("#slideshow" + slideshow + " + .points .circle");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search