document.getElementById retourne une valeur Null..

**jpe54** · 05/04/2013, 07h50

Bonjour,

Je séche sur un problème peut être lié à des lunettes à remplacer...

Le code suivant dans le head me retourne une valeur null malgré un id div correct... donc la valeur marquée n'est pas appliquée, alors que sur d'autres pages c'est ok....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script src="Liste_Diapos.js"></script> 
 
<script type="text/javascript">
// Masquer document le temps du chargement
window.onload = document.getElementById("slideShowImages").style.visibility = "hidden";
</script>
 
</head>

Un peu plus loin dans le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <div id="slideShowImages">
 
<script type="text/javascript">
 
for (i=0; i < tabImgSave.length; i++) {
document.getElementById("slideShowImages").innerHTML += "<img src='../AlbumHTML 1024x768/"+tabImgSave[i]+"' alt='Slide 1' />";
}
// Afficher la page
document.getElementById("slideShowImages").style.visibility = "visible";
 
</script>
 
  </div>

Est-ce lié au chargement de la liste du div depuis le fichier Liste_Diapos.js ?

Une bizarrerie en plus.

En local une seule image se charge au démarrage puis une par une... en ligne la totalités des 3 images - ce qui peut être long car ce sont des images HD 1620x1080 de poids maxi 600 Ko - se chargent puis le défilement une par une commence... ce qui peut être long car ce sont des images HD 1620x1080 de poids maxi 600 Ko...

Lien d'hébergement pour test : Diaporama...

Merci d'un éclairage pédagogique...

**SpaceFrog** · 05/04/2013, 08h39

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 <div id="slideShowImages">
 
<script type="text/javascript">
 
for (i=0; i < tabImgSave.length; i++) {
document.getElementById("slideShowImages").innerHTML += "<img src='../AlbumHTML 1024x768/"+tabImgSave[i]+"' alt='Slide 1' />";
}
// Afficher la page
document.getElementById("slideShowImages").style.visibility = "visible";
 
</script>
 
  </div>

Regarde bein ton code ..
le div est il instancié au moment le code est interprété ???
ou se trouve la balise de fermeture du div ?

**jpe54** · 05/04/2013, 11h57

Je doit être complétement aveugle ou Alzeimer me guette !

Ce code test bricolé rapidement fonctionne sans retour de code null mais avec un petit doute sur un affichage "flash" au moment du chargement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function Hide (addr) { document.getElementById(addr).style.visibility = "hidden"; }
function Show (addr) { document.getElementById(addr).style.visibility = "visible"; }
 
function Bascule(MyId)
{
	if (document.getElementById(MyId).style.visibility == "hidden")	{ Show(MyId); } else { Hide(MyId); }
}
 
window.onload = function() { Hide("NameDivTest"); };

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<body>
	<h1>Titre</h1>
	<p>Bla bla</p>
	<a href="#" onclick = "Bascule('NameDivTest');">Cliquer pour changer état du div en ligne ci-dessous...</a>
	<div id="NameDivTest">Div visible ou non selon le cas
	<img src="Vide.jpg" alt="Slide 1" />
	</div>
</body>

Pour ce qui est du code en ligne, même en mettant un texte bidon derrière le div et en écrivant en dur les balises img l'anomalie persiste :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<body>
 
  <div id="slideShowImages">ne rien afficher...
    <img src="Diapos_1.jpg" alt="Slide 1" />
    <img src="Diapos_2.jpg" alt="Slide 2" />
  </div>
 
  <button id="slideShowButton"></button>
  <script src="slideShow.js"></script>
 
</body>

En fait ce que je souhaite est un chargement invisible des images qui seront affichées une par une...

Bien amicalement,

**SpaceFrog** · 05/04/2013, 12h43

fais une recherche avec image preloader ...

**jpe54** · 05/04/2013, 16h01

Donc le code nul proviendrait de l'absence de fin de téléchargement des éléments img...

Je vais donc coder différemment en ne chargeant que les emplacements des images puis "au fil de l'eau" l'image proprement dite...

Problème résolu donc...

PS : J'active bien le bouton résolu...

document.getElementById retourne une valeur Null..

JavaScript

Vue hybride

Discussions similaires

Partager

Partager