Switched my PHP loaders from jQuery to Fetch and now none of my JS is working with them

user_8746438 0
Viewed 21

I switched all my loaders from jQuery to Fetch and now none of the sliders are working but the slides themselves are showing up correctly in the DOM. I just can't seem to target them with JS.

https://www.harpercollege.edu/dev/whoward-dev-area/dev-index.php

fetch('/_resources/php/dev-home-interrupter-loader.php')
  .then(function(response) {
    return response.text();
  })
  .then(function(body) {
    document.querySelector('#home-interrupter').innerHTML = body;
  });

    const interrupterslidesContainer = document.getElementById("interrupter-slides-container");
    const interrupterslide = document.querySelector(".interrupter-slide");
    const previnterrupter = document.getElementById("interrupter-slide-arrow-prev");
    const nextinterrupter = document.getElementById("interrupter-slide-arrow-next");

    nextinterrupter.addEventListener("click", () => {
      const interrupterslideWidth = interrupterslide.clientWidth;
      interrupterslidesContainer.scrollLeft += interrupterslideWidth;
    });

    previnterrupter.addEventListener("click", () => {
      const interrupterslideWidth = interrupterslide.clientWidth;
      interrupterslidesContainer.scrollLeft -= interrupterslideWidth;
    });
javascript
1 Answers

Your code runs before the fetch even starts

fetch('/_resources/php/dev-home-interrupter-loader.php')
  .then(function(response) {
    return response.text();
  })
  .then(function(body) {
    document.querySelector('#home-interrupter').innerHTML = body;
  })
  .then(() => {
    const interrupterslidesContainer = document.getElementById("interrupter-slides-container");
    const interrupterslide = document.querySelector(".interrupter-slide");
    const previnterrupter = document.getElementById("interrupter-slide-arrow-prev");
    const nextinterrupter = document.getElementById("interrupter-slide-arrow-next");

    nextinterrupter.addEventListener("click", () => {
      const interrupterslideWidth = interrupterslide.clientWidth;
      interrupterslidesContainer.scrollLeft += interrupterslideWidth;
    });

    previnterrupter.addEventListener("click", () => {
      const interrupterslideWidth = interrupterslide.clientWidth;
      interrupterslidesContainer.scrollLeft -= interrupterslideWidth;
    });
})
user_50895670
Related