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.