В чем проблема слайдер на js?

Question

[Ibishka]

Написал самодельный слайдер когда было 1 слайдер все работало но когда я добавил еще 1 изменил querySelector на querySelectorAll а тут в консоле такая ошибка: Uncaught TypeError: Cannot set property 'className' of undefined. Как сделать чтоб слайдер работал хоть на сайте будет 3 штук. Помогите пж.

Первый вид кода:

document.querySelector("#hamburger").onclick = function() {
  this.classList.toggle("open");
};

let currentSlide = 0,
  i,
  slides = document.querySelectorAll("#slide");

for (i = 1; i <= slides.length; i++) {
  document.querySelector("#dots").innerHTML +=
    '<span class="slider__dot" id="dot">' + i + "</span>";
}

let dot = document.querySelectorAll("#dot");
dot[0].classList.add("active");

function goToSlide(n) {
  slides[currentSlide].className = "slide";
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].classList.add("active");
  document.querySelector("#dots > span.active").classList.remove("active");
  dot[currentSlide].classList.add("active");
}

document.querySelector("#next").onclick = function() {
  goToSlide(currentSlide + 1);
};
document.querySelector("#prev").onclick = function() {
  goToSlide(currentSlide - 1);
};

for (i = 0; i < dot.length; i++) {
  dot[i].onclick = function() {
    goToSlide(Number(this.textContent) - 1);
  };
}

Answer 1

[Пашенька]

Слайдер нужно писать в ООП стиле. Вызывать его на некотором контейнере и работать(искать) в этом контексте, если вы желаете получить несколько экземпляров слайдера.
То, что вы в одном месте поменяли на querySelectorAll, не сделает все остальные querySelector работающими как надо. Удалить и переписать заново, используя приобретённый опыт.