Positionner windows.onload pour inclure plusieurs fonctions

Résolu/Fermé
lucanne212274 Messages postés 9 Date d'inscription samedi 30 octobre 2021 Statut Membre Dernière intervention 27 juin 2022 - 1 nov. 2021 à 16:39
lucanne212274 Messages postés 9 Date d'inscription samedi 30 octobre 2021 Statut Membre Dernière intervention 27 juin 2022 - 1 nov. 2021 à 17:33
Bonjour à tous,


Je cherche à ce que 4 fonctions soient actives dès le chargement de la page mais je ne sais où positionner le windows. J'ai essayé pas mal de choses, comme d'entourer tout cela d'un window.addEventListener ('load') mais le code ne fonctionne plus.
En l'état, seulement la dernière fonction est chargée au démarrage.
J'imagine que mettre un window.onload dans chacun des addEventListner n'est pas la solution...

(C'est pour des flèches de navigations horizontales dans une div overflow-x disparaissent lorsque le contenu arrive en butée)

Voici le code :

const cBoxAv = document.getElementById("concerts-box-av")
const cBoxPr = document.getElementById("concerts-box-pr")
const buttonLeftAv = document.getElementById('fleche-avg');
const buttonRightAv = document.getElementById('fleche-avd');
const buttonLeftPr = document.getElementById('fleche-prg');
const buttonRightPr = document.getElementById('fleche-prd')

cBoxAv.addEventListener("scroll", window.onload = function (){
    var XscrollAvg = cBoxAv.scrollLeft;
    if(XscrollAvg == 0) {
        buttonLeftAv.classList.add('hide')
    } else {
        buttonLeftAv.classList.remove('hide')
    }
})

cBoxPr.addEventListener("scroll", window.onload = function (){
    var XscrollPrg = cBoxPr.scrollLeft;
    if(XscrollPrg == 0) {
        buttonLeftPr.classList.add('hide')
    } else {
        buttonLeftPr.classList.remove('hide')
    }
})

cBoxAv.addEventListener("scroll", window.onload = function(){
    var XscrollAvd = cBoxAv.scrollLeft;
    var cBoxAvScrollWidth = cBoxAv.scrollWidth;
    var cBoxAvClientWidth = cBoxAv.clientWidth;
    var XscrollAvPercent = XscrollAvd / (cBoxAvScrollWidth - cBoxAvClientWidth);
    var XscrollAvPercentRound = Math.round (XscrollAvPercent * 100)

    if(XscrollAvPercentRound == 100) {
        buttonRightAv.classList.add('hide')
    } else if (cBoxAvClientWidth >= cBoxAvScrollWidth) {
        buttonRightAv.classList.add('hide')
    } else {
        buttonRightAv.classList.remove('hide')
    }
})

cBoxPr.addEventListener("scroll", window.onload = function(){
    var XscrollPrd = cBoxPr.scrollLeft;
    var cBoxPrScrollWidth = cBoxPr.scrollWidth;
    var cBoxPrClientWidth = cBoxPr.clientWidth;
    var XscrollPrPercent = XscrollPrd / (cBoxPrScrollWidth - cBoxPrClientWidth);
    var XscrollPrPercentRound = Math.round (XscrollPrPercent * 100)
    
    if(XscrollPrPercentRound == 100) {
        buttonRightPr.classList.add('hide')
    } else if (cBoxPrClientWidth >= cBoxPrScrollWidth) {
        buttonRightPr.classList.add('hide')
    }  else {
        buttonRightPr.classList.remove('hide')
    }
})




Merci beaucoup !!



Configuration: Windows / Chrome 95.0.4638.54

2 réponses

jordane45 Messages postés 36893 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 février 2023 4 479
1 nov. 2021 à 17:01
bonjour


const cBoxAv = document.getElementById("concerts-box-av");
const cBoxPr = document.getElementById("concerts-box-pr");
const buttonLeftAv = document.getElementById('fleche-avg');
const buttonRightAv = document.getElementById('fleche-avd');
const buttonLeftPr = document.getElementById('fleche-prg');
const buttonRightPr = document.getElementById('fleche-prd');

window.onload = function exampleFunction(){
  
   
  cBoxAv.addEventListener("scroll", function (){
      var XscrollAvg = cBoxAv.scrollLeft;
      if(XscrollAvg == 0) {
          buttonLeftAv.classList.add('hide');
      } else {
          buttonLeftAv.classList.remove('hide');
      }

      var XscrollAvd = cBoxAv.scrollLeft;
      var cBoxAvScrollWidth = cBoxAv.scrollWidth;
      var cBoxAvClientWidth = cBoxAv.clientWidth;
      var XscrollAvPercent = XscrollAvd / (cBoxAvScrollWidth - cBoxAvClientWidth);
      var XscrollAvPercentRound = Math.round (XscrollAvPercent * 100);

      if(XscrollAvPercentRound == 100) {
          buttonRightAv.classList.add('hide')
      } else if (cBoxAvClientWidth >= cBoxAvScrollWidth) {
          buttonRightAv.classList.add('hide');
      } else {
          buttonRightAv.classList.remove('hide');
      }
  })


  cBoxPr.addEventListener("scroll",function (){
      var XscrollPrg = cBoxPr.scrollLeft;
      if(XscrollPrg == 0) {
          buttonLeftPr.classList.add('hide');
      } else {
          buttonLeftPr.classList.remove('hide');
      }

      var XscrollPrd = cBoxPr.scrollLeft;
      var cBoxPrScrollWidth = cBoxPr.scrollWidth;
      var cBoxPrClientWidth = cBoxPr.clientWidth;
      var XscrollPrPercent = XscrollPrd / (cBoxPrScrollWidth - cBoxPrClientWidth);
      var XscrollPrPercentRound = Math.round (XscrollPrPercent * 100);
      
      if(XscrollPrPercentRound == 100) {
          buttonRightPr.classList.add('hide');
      } else if (cBoxPrClientWidth >= cBoxPrScrollWidth) {
          buttonRightPr.classList.add('hide');
      }  else {
          buttonRightPr.classList.remove('hide');
      }
  })
}



0
lucanne212274 Messages postés 9 Date d'inscription samedi 30 octobre 2021 Statut Membre Dernière intervention 27 juin 2022
1 nov. 2021 à 17:33
Cher Jordane,

Une nouvelle fois un immense merci !!

Tu es mon sauveur !
0