Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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;
    });

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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;
    });
})

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading