document.getElementById qui ne fonctionne pas
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
document.getElementById qui ne fonctionne pas
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
Dernière édition par Selli le Lun 5 Juin 2023 - 19:03, édité 1 fois
Re: document.getElementById qui ne fonctionne pas
Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : 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).
Re: document.getElementById qui ne fonctionne pas
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.
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.
Re: document.getElementById qui ne fonctionne pas
Ah, mais oui !
En fait, pour la plupart des scripts, il faut commencer par $(function(){ et finir par });, comme ceci :
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.
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.
Re: document.getElementById qui ne fonctionne pas
En effet ! Ceci explique cela ! Cela fonctionne parfaitement maintenant.
Merci beaucoup pour votre aide et votre réactivité
Merci beaucoup pour votre aide et votre réactivité
Re: document.getElementById qui ne fonctionne pas
Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à :
|
Sujets similaires
» document.getElementById ne fonctionne pas
» Post non souhaité avec bouton onclick et Javascript getElementById
» Un document qui défile
» Document word
» Document word
» Post non souhaité avec bouton onclick et Javascript getElementById
» Un document qui défile
» Document word
» Document word
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum