document.getElementById qui ne fonctionne pas

[Selli]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 05/06/2023
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Sur mon forum, nous avons la possibilité de faire des arbres généalogiques. Lorsqu'ils sont trop large, il y a naturellement un scroll horizontal qui est installé pour pouvoir voir tout l'arbre. Jusqu'à présent cet ascenseur s'utilise de façon classique avec la souris (clique sur l’ascenseur, et voyage de gauche à droite). Cependant, pour une future mise à jour j'aimerais que ce scroll horizontal se fasse via une "grabbing hand" (un peu à la manière de google map, je sais pas trop si je suis clair dans mon explication).

J'ai donc commencer à coder ça mais j'ai une erreur au niveau du javascript.
Il n'arrive pas à récupérer l'élément que je lui demande et me donne un "Uncaught TypeError: container is null"

J'ai testé ce code sur codepen et tout fonctionne à merveille, et je n'arrive pas à comprendre pourquoi il n'arrive pas à récupérer l'élement.

Je vous laisse ci-dessous le code en question,
Merci par avance pour vos lumières

Du côté de l'HTML j'ai ceci :
L'arbre généalogique (qui est posté dans un sujet) :

Code:

<div class="containertree" id="items-container"> <div class="tree" style="width:4400px"> <ul> <li> <div> <span class="male">Grand père Hathorne<br>90 ans</span><span class="spacer"></span><span class="female">Grand mère Hathorne<br>née xxx, 80 ans</span> </div> <ul> <li id="PapaAlistair"> <div> <span class="male"><a href="#Ulysses">Ulysses Hathorne</a><br>55 ans</span><span class="spacer"></span><span class="female"><a href="#Tanya">Tanya Hathorne</a><br>née Lestrange, 50 ans</span> </div> <ul> <li> <div> <span class="male"><a href="#Callan">Callan Hathorne</a><br>13/04/1906, 34 ans</span><span class="spacer"></span><span class="female">xxx Hathorne<br>née xxx, xx ans</span> </div> <ul> <li> <div> <span class="male">xxx Hathorne<br>xx ans, PNJ</span> </div> </li> <li> <div> <span class="male">xxx Hathorne<br>xx ans, PNJ</span> </div> </li> <li> <div> <span class="male">xxx Hathorne<br>xx ans, PNJ</span> </div> </li> </ul> </li> <li> <div> <span class="male"><a href="#Holden">Holden Hathorne</a><br>12/12/1907, 33 ans</span><span class="spacer"></span><span class="female">xxx Hathorne<br>née xxx, xx ans</span> </div> <ul> <li> <div> <span class="female">xxx Hathorne<br> xx ans, PNJ</span> </div> </li> <li> <div> <span class="male">xxx Hathorne<br>xx ans, PNJ</span> </div> </li> <li> <div> <span class="female">xxx Hathorne<br> xx ans, PNJ</span> </div> </li> <li> <div> <span class="female">xxx Hathorne<br> xx ans, PNJ</span> </div> </li> <li> <div> <span class="male">xxx Hathorne<br>xx ans, PNJ</span> </div> </li> <li> <div> <span class="male">xxx Hathorne<br>xx ans, PNJ</span> </div> </li> </ul> </li> <li> <div> <span class="male"><a href="#Tucker">Tucker Hathorne</a><br>06/07/1909, 31 ans</span><span class="spacer"></span><span class="female">June Hathorne<br>née xxx, xx ans</span> </div> <ul> <li> <div> <span class="female">Blossom Hathorne<br>9 ans, PNJ</span> </div> </li> <li> <div> <span class="male">Winter Hathorne<br>5 ans, PNJ</span> </div> </li> </ul> </li> <li> <div> <span class="female"><a href="#Allison">@"Allison Flamel"</a><br> née Hathorne, 06/07/1909, 31 ans</span><span class="spacer"></span><span class="male">@"Emile Lancelot Flamel"<br>34 ans</span> </div> <ul> <li> <div> <span class="female">      Constance Flamel      <br> 9 ans, PNJ</span> </div> </li> <li> <div> <span class="male">      Arthur Flamel      <br>5 ans, PNJ</span> </div> </li> </ul> </li> <li> <div> <span class="male">@"Jackson Howe", fausse identité<br>Né Alistair Hathorne, 30 ans<br>cracmol</span> </div> </li> <li> <div> <span class="female"><a href="#Carrie">Carrie xxx</a><br>née Hathorne, 09/01/1912, 28 ans</span><span class="spacer"></span><span class="male">xxx xxx<br>xx ans</span> </div> <ul> <li> <div> <span class="male">xxx<br>xx ans, PNJ</span> </div> </li> <li> <div> <span class="male">xxx<br>xx ans, PNJ</span> </div> </li> <li> <div> <span class="female">xxx<br>xx ans, PNJ</span> </div> </li> </ul> </li> <li> <div> <span class="female"><a href="#Alyx">Alyx Hathorne</a><br>19/12/1914, 26 ans</span> </div> </li> <li> <div> <span class="male"><a href="#Gareth">Gareth Hathorne</a><br>29/09/1915, 25 ans</span> </div> </li> </ul> </li> <li> <div> <span class="male"><a href="#Liam">Liam Hathorne</a><br>53 ans</span><span class="spacer"></span><span class="female"><a href="#epouseLiam">xxx Hathorne</a><br>née Black, 43 ans</span> </div> <ul> <li> <div> <span class="male"><a href="#Logan">Logan Hathorne</a><br>25 ans</span><span class="spacer"></span><span class="female">xxx Hathorne<br>née xxx, xx ans</span> </div> <ul> <li> <div> <span class="male">xxx Hathorne <br>xx ans, pnj</span> </div> </li> <li> <div> <span class="female">xxx Hathorne<br>xx ans, pnj</span> </div> </li> </ul> </li> <li> <div> <span class="male"><a href="#Russel">Russel Hathorne</a><br>23 ans</span> </div> </li> <li> <div> <span class="male"><a href="#Leon">Leon Hathorne</a><br>20 ans</span><span class="spacer"></span><span class="female">xxx Hathorne<br>née xxx, xx ans</span> </div> </li> <li> <div> <span class="male"><a href="#Declan">Declan Hathorne</a><br>19 ans</span> </div> </li> </ul> </li> <li> <div> <span class="female"><a href="#Heidi">Heidi Hathorne</a><br> 50 ans</span><span class="spacer"></span><span class="male">Grégoire Goyle<br>✟</span> </div> <ul> <li> <div> <span class="male"><a href="#Tobias">Tobias Goyle</a><br>24 ans</span><span class="spacer"></span><span class="female">xxx Goyle<br>née xxx, xx ans</span> </div> </li> <li> <div> <span class="male"><a href="#Jayden">Jayden Goyle</a><br>22 ans</span><span class="spacer"></span><span class="female">xxx Goyle<br>née xxx, xx ans</span> </div> </li> <li> <div> <span class="female"><a href="#Scarlett">Scarlett xxx</a><br>née Goyle, 18 ans</span><span class="spacer"></span><span class="male">xxx xxx<br> xx ans</span> </div> </li> </ul> </li> <li> <div> <span class="male">Duncan Hathorne<br>48 ans, PNJ</span><span class="spacer"></span><span class="female">xxx Hathorne<br>née xxx, xx ans, PNJ</span> </div> <ul> <li> <div> <span class="male">xxx Hathorne<br>30 ans, PNJ</span><span class="spacer"></span><span class="female">xxx Hathorne<br>née xxx, xx ans, PNJ</span> </div> <ul> <li> <div> <span class="female">xxx Hathorne<br>xx ans, pnj</span> </div> </li> <li> <div> <span class="male">xxx Hathorne<br>xx ans, pnj</span> </div> </li> <li> <div> <span class="female">xxx Hathorne<br>xx ans, pnj</span> </div> </li> </ul> </li> <li> <div> <span class="male">xxx Hathorne <br>26 ans, PNJ </span> <span class="spacer"> </span> <span class="female">xxx Hathorne <br>née xxx, xx ans, PNJ </span> </div> </li> <li> <div> <span class="male">xxx Hathorne <br>23 ans, PNJ </span> <span class="spacer"> </span> <span class="female">xxx Hathorne <br>née xxx, xx ans, PNJ </span> </div> </li> <li> <div> <span class="male">xxx Hathorne <br>20 ans, PNJ </span> <span class="spacer"> </span> <span class="female">xxx xxx <br>xx ans, PNJ </span> </div> <ul> <li> <div> <span class="female">xxx Hathorne <br>xx ans, pnj </span> </div> </li> <li> <div> <span class="female">xxx Hathorne <br>xx ans, pnj </span> </div> </li> <li> <div> <span class="female">xxx Hathorne <br>xx ans, pnj </span> </div> </li> </ul> </li> <li> <div> <span class="female">xxx Hathorne <br>18 ans, PNJ </span> </div> </li> <li> <div> <span class="male">xxx Hathorne <br>15 ans, PNJ </span> </div> </li> </ul> </li> </ul> </li> </ul> </div> </div>

Le Javascript j'ai ceci :

Code:

const container = document.getElementById('items-container');
                
let startY;
let startX;
let scrollLeft;
let scrollTop;
let isDown;

container.addEventListener('mousedown',e => mouseIsDown(e));  
container.addEventListener('mouseup',e => mouseUp(e));
container.addEventListener('mouseleave',e=>mouseLeave(e));
container.addEventListener('mousemove',e=>mouseMove(e));

function mouseIsDown(e){
  isDown = true;
  startY = e.pageY - container.offsetTop;
  startX = e.pageX - container.offsetLeft;
  scrollLeft = container.scrollLeft;
  scrollTop = container.scrollTop;
}
function mouseUp(e){
  isDown = false;
}
function mouseLeave(e){
  isDown = false;
}
function mouseMove(e){
  if(isDown){
    e.preventDefault();
    //Move vertcally
    const y = e.pageY - container.offsetTop;
    const walkY = y - startY;
    container.scrollTop = scrollTop - walkY;

    //Move Horizontally
    const x = e.pageX - container.offsetLeft;
    const walkX = x - startX;
    container.scrollLeft = scrollLeft - walkX;

  }
}

Merci par avance pour vos lumières

[Toryudo]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour !

Pourriez-vous faire en sorte que le lien que vous avez donné soit accessible pour les invités ?
Sinon, on arrive sur la page de connexion et nous ne pouvons pas regarder l'erreur directement.

Hypothèse à l'aveugle : est-ce qu'il y a plusieurs fois l'id "items-container" sur la page, ou une seule fois ? S'il y est plusieurs fois, ça peut expliquer le problème, un id devant être unique sur toute une page. S'il y a plusieurs fois un même id, la fonction document.getElementById() ne donne plus forcément le résultat souhaité (je ne pense même pas qu'elle prenne le premier résultat trouvé... enfin, en tout cas, il ne faut pas).

[Selli]

Bonjour Toryudo,

J'ai mis à jour les permissions du forum, normalement vous devriez pouvoir y avoir accès.

Je confirme également qu'il n'y a qu'un seul élément qui possède l'id items-container.

[Toryudo]

Ah, mais oui !
En fait, pour la plupart des scripts, il faut commencer par $(function(){ et finir par });, comme ceci :

Code:

$(function(){
const container = document.getElementById('items-container');
               
let startY;
let startX;
let scrollLeft;
let scrollTop;
let isDown;
 
container.addEventListener('mousedown',e => mouseIsDown(e)); 
container.addEventListener('mouseup',e => mouseUp(e));
container.addEventListener('mouseleave',e=>mouseLeave(e));
container.addEventListener('mousemove',e=>mouseMove(e));
 
function mouseIsDown(e){
  isDown = true;
  startY = e.pageY - container.offsetTop;
  startX = e.pageX - container.offsetLeft;
  scrollLeft = container.scrollLeft;
  scrollTop = container.scrollTop;
}
function mouseUp(e){
  isDown = false;
}
function mouseLeave(e){
  isDown = false;
}
function mouseMove(e){
  if(isDown){
    e.preventDefault();
    //Move vertcally
    const y = e.pageY - container.offsetTop;
    const walkY = y - startY;
    container.scrollTop = scrollTop - walkY;
 
    //Move Horizontally
    const x = e.pageX - container.offsetLeft;
    const walkX = x - startX;
    container.scrollLeft = scrollLeft - walkX;
 
  }
}
});

En fait, tout dépend de "quand est exécuté le Javascript". Sur Forumactif, le Javascript est exécuté avant le reste de la page, ce qui signifie qu'au moment où il tourne, l'élément "items-container" n'existe pas encore. En ajoutant $(function(){ et }); au début et à la fin du script, vous dites au script de s'exécuter après le reste de la page ; donc à ce moment-là, l'élément "items-container" existera bien, le script pourra fonctionner.
J'imagine que lors de vos tests sur codepen, c'était l'inverse, d'abord la page puis le Javascript qui s'exécutait.

[Selli]

En effet ! Ceci explique cela ! Cela fonctionne parfaitement maintenant.
Merci beaucoup pour votre aide et votre réactivité

[Toryudo]

Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton