Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

84
Visualizações
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;
    });
almost 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

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

almost 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda