DOM Mettre display=none au chargement d'une page

**RicardoBxl** · 11/02/2013, 19h23

Bonsoir,

Je viens vers vous car là franchement je ne comprends pas

. Mais avant d'aller plus loin sachez que je connais peu le Javascript ( me suis lancé il y a 3 semaines) et donc peut-être ai-je loupé quelque chose ou pas encore vu quelque chose

Voila le problème:

Au chargement de toutes mes pages je souhaite mettre les infos se trouvant dans le tag <aside> (id="AsideNews") pour le tag <article> à display:none.

Cela fonctionne dans les cas suivant:

- au chargement de la page index.php quel que soit la langue de départ;
- à chaque changement de langue dans index.php
- au chargement de CV.php si la langue est en français

Ne fonctionne pas dans les cas ou je tente de charger ma page CV.php alors que la langue est différente du français

Le message d'erreur que l'on m'affiche est:

Erreur Javascript: TypeError Document.getElementById(...) is null

Il est étonnant de noter que dans les deux copies d'écran que je vous fourni il indique ce message mais en français pas il cache mais pas dans les autres langues.

Si un exemple vous parle mieux voici l'adresse de mon site: www.creditriskmanagement.be

Pour faire cela j'ai pondu dans un fichier JS séparé le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
Function CacherBlocsAsideChargement(id,tag){
 
	var el_id=document.getElementById(id);
	var el_tag=el_id.getElementsByTagName(tag);
 
	for (var i=0; i<el_tag.length; i++){
 
		el_tag[i].style.display='none';
 
	}
}

et dans mes pages index.php et CV.php (deux pages pour l'exemple mais comme dit toutes les pages doivent exécuter ce code)

index.php

Code :

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

<body onload="CacherBlocsCenterChargement();CacherBlocsAsideChargement('AsideNews','article');">

CV.php

Code html :

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

<body onload="CacherBlocsCVChargement();CacherBlocsAsideChargement('AsideNews','article');">

et le code HTML5 repris dans un fichier à part

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<aside id="AsideNews">
 
	<h2>Highlights</h2>
	<span class="HLDate">February 11th 2013</span>
 
	<span class="HLDate"></span>
 
	<h3 class="HLTitres">
		This website <input type="image" name="button"
		src="Images/icon_fleche.png" alt="Suite"
		onclick="AfficherCacherBlocsCenterAside('Afficher2')">
	</h3>
 
	<article id="Afficher2">
		<h4 class="HLSousTitre">Online this week</h4>
		<p>	
		- page Credit Management<br>
		- page resume in English<br> 
		- page resume in Dutch<br>
		</p>
 
		<h4 class="HLSousTitre">Javascript</h4>
		<p>
		Coding of the event onclick. In concrete terms coding of the buttons arrows 
		to show texts.
		</p>
 
		<h4 class="HLSousTitre">PHP & MySQL</h4>
		<p>
		I am currently improving my knowledge of PHP
		and MySQL in order to add a form and use a data base on my website.
		</p>
 
	</article>
 
	<h3 class="HLTitres">Evening classes <input type="image" name="button"
		src="Images/icon_fleche.png" alt="suite"
		onclick="AfficherCacherBlocsCenterAside('Afficher3')">
	</h3>
 
	<article id="Afficher3">In Dutch UTF 6 and in English UTF7
	</article>
 
	<h3 class="HLTitres">Looking for a job <input type="image" name="button"
		src="Images/icon_fleche.png" alt="suite"
		onclick="AfficherCacherBlocsCenterAside('Afficher4')">
	</h3>
 
	<article id="Afficher4">Motivated more than ever<br>I apply every day
		via several websites. With preference for positions such Credit controller, credit analyst, 
		reporting officer and, financial analyst.
	</article>
 
	<h3 class="HLTitres">Translation of my CV <input type="image" name="button"
		src="Images/icon_fleche.png" alt="suite"
		onclick="AfficherCacherBlocsCenterAside('Afficher5')">
	</h3>
 
	<article id="Afficher5">People with a strong knowledge of Dutch and English (teachers)
		are currently proofreading my resumes.
	</article>
 
</aside> <!-- Fin AsideRight -->

**sekaijin** · 11/02/2013, 20h32

Code html :

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

<aside id="AsideNews" style="display:none;">

A+JYT

**SylvainPV** · 11/02/2013, 20h59

L'erreur est claire, l'élément à l'ID indiqué n'a pas été trouvé dans la page. Regarde le code HTML de la page générée pour le confirmer.

De notre côté, on ne peut pas t'aider davantage sans savoir comment tu gères tes langues en PHP ni quel est le code HTML complet obtenu.

**RicardoBxl** · 11/02/2013, 21h03

Je comprends l'esprit dans lequel ta solution est proposée mais cela ne m'aide pas.

Il faut tenir compte du fait que la fonction que j'ai créée est appelée dans toutes mes pages.

Pour chaque page je fais appel au contenu de ma section droite via une instruction PHP

Code php :

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

<?php include('SectionRight...php') ?>

Le code HTML de ce fichier est repris entre les balises <aside id="AsideNews"> </aside>. Et entre ses deux balises tous les <article> doivent être mises à display:none.

Le but est que si par exemple dans index.php l'internaute à fait se développer un ou des articles (donc display:block) il faut que lorsque l'on recharge la page index.php ou tout autre page tous les articles se remettent à display:none.

PS J'ai mis ".." derrière SectionRight pour faire simple mais en fait cela doit être soit fr, nl ou en.

**RicardoBxl** · 11/02/2013, 21h29

Voici le code de mon fichier index.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<?php 
	include('Langues/Langues.php');
?> 
<!DOCTYPE html>
<?php echo "<html lang=$langpage>" ?>  
	<head>
<?php
	include('CorpsHTML5/Head.php');
?>
	</head>
	<body onload="CacherBlocsCenterChargement();CacherBlocsAsideChargement('AsideNews','article');">
		<div id="Centrer_Page">
			<header>
				<h1>Senior Credit Controller</h1>
				<h2><?php echo TXT_YearsExperience?></h2>
				<form id="Recherche" method="GET" action="http://google.com/search">
					<input type="search" name="q" placeholder="Recherche">
					<input type="hidden" name="q" value="site:www.creditriskmanagement.be">
				</form>
				<div id="SousNavLanguesSite">
					<ul>
						<li><img src="Images/icon_eu.png" alt="Select a language" />
							<ul>
								<li><a href="index.php?lang=en"><img src="Images/icon_en.png"
									alt="English" /></a>
								</li>
								<li><a href="index.php?lang=fr"><img src="Images/icon_fr.png"
									alt="French" /></a>
								</li>
								<li><a href="index.php?lang=nl"><img src="Images/icon_nl.png" 
									alt="Dutch" /></a>
								</li>
							</ul>
						</li>
					</ul>
				</div> 
				<div id="SousNavUtile">
					<ul>
						<li><?php echo "<a href=\"{$fileHome}\">"?>Home</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Site map</a></li>
					</ul>
				</div> 
				<?php
					include('CorpsHTML5/Nav.php');
				?>
			</header> 
			<section id="SectionLeft">
				<?php
					include('CorpsHTML5/SectionLeft.php');
				?>
			</section> 
			<section id="SectionCenter">
					<?php 
						if ($langpage == 'fr') 
						{
							include('Langues/Text_fr.php'); 
						}
						else if ($langpage == 'en') 
						{
							include('Langues/Text_en.php'); 
						}
						else
						{
							include('Langues/Text_nl.php'); 
						}						
					?>
			</section> 
			<section id="SectionRight">
					<?php 
						if ($langpage == 'fr') 
						{
							include('CorpsHTML5/SectionRight_fr.php');
						}
						else if ($langpage == 'en') 
						{
							include('CorpsHTML5/SectionRight_en.php'); 
						}
						else
						{
							include('CorpsHTML5/SectionRight_nl.php'); 
						}						
					?>
			</section> 
			<p>
				<a href="http://jigsaw.w3.org/css-validator/check/referer"> <img
					id="W3C" src="http://jigsaw.w3.org/css-validator/images/vcss"
					alt="CSS Valide !" /> </a>
			</p>
		</div> 
	</body>
</html>

Voici le code de mon fichier CV.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<?php 
	include('Langues/Langues.php');
?> 
<!DOCTYPE html>
<?php echo "<html lang=$langpage>" ?>  
	<head>
		<?php
			include('CorpsHTML5/Head.php');
		?>
	</head>
	<body onload="CacherBlocsCVChargement();CacherBlocsAsideChargement('AsideNews','article');">
		<div id="Centrer_Page">
			<header>
				<h1>Senior Credit Controller</h1>
				<h2><?php echo TXT_YearsExperience?></h2>
				<form id="Recherche" method="GET" action="http://google.com/search">
					<input type="search" name="q" placeholder="Recherche">
					<input type="hidden" name="q" value="site:www.creditriskmanagement.be">
				</form>
				<div id="SousNavLanguesSite">
					<ul>
						<li><img src="Images/icon_eu.png" alt="Select a language" />
							<ul>
								<li><a href="CV.php?lang=en"><img src="Images/icon_en.png"
									alt="English" /></a>
								</li>
								<li><a href="CV.php?lang=fr"><img src="Images/icon_fr.png"
									alt="French" /></a>
								</li>
								<li><a href="CV.php?lang=nl"><img src="Images/icon_nl.png" 
									alt="Dutch" /></a>
								</li>
							</ul>
						</li>
					</ul>
				</div> 
				<div id="SousNavUtile">
					<ul>
						<li><?php echo "<a href=\"{$fileHome}\">"?>Home</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Site map</a></li>
					</ul>
				</div> 
				<?php
					include('CorpsHTML5/Nav.php');
				?>
			</header> 
			<section id="SectionLeft">
				<?php
					include('CorpsHTML5/SectionLeft.php');
				?>
			</section> 
			<section id="SectionCenter">
				<?php
					if ($langpage == 'fr') 
					{
						include('CorpsHTML5/SectionCenterCV_fr.php'); 
					}
					else if ($langpage == 'en')
					{
						include('CorpsHTML5/SectionCenterCV_en.php'); 
					}
					else
					{
						include('CorpsHTML5/SectionCenterCV_nl.php'); 
					}						
				?>
			</section> 
			<section id="SectionRight">
				<?php 
					if ($langpage == 'fr') 
					{
						include('CorpsHTML5/SectionRight_fr.php'); 
					}
					else if ($langpage == 'en') 
					{
						include('CorpsHTML5/SectionRight_en.php'); 
					}
					else
					{
						include('CorpsHTML5/SectionRight_nl.php'); 
					}						
				?>
			</section> 
		</div> 
	</body>
</html>

Voici le code de mon fichier Langues.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
$languages = array('nl', 'en', 'fr');  
$extension = '.php';  
$lang = '';   
$defautlang ='en';   
$langpage='';   
if(isset($_GET['lang']) && in_array($_GET['lang'],$languages))   
{
	$lang = $_GET['lang'];   
}
else if (isset($_COOKIE['lang']) && in_array($_COOKIE['lang'], $languages))  
{
	$lang = $_COOKIE['lang'];   
}	
 
if (!empty($lang))   
{
	setcookie('lang', $lang,mktime(0,0,0,31,12,2013));   
}	
 
if (!empty($lang) && $lang != $defautlang)   
{
	include($lang.$extension);   
	$langpage=$lang;
}
else
{
	include($defautlang.$extension);  
	$langpage=$defautlang;
}
 
$fileCV='CV'.$extension.'?lang='.$langpage;   
$fileWeb='Web'.$extension.'?lang='.$langpage;   
$fileHome='index'.$extension.'?lang='.$langpage;   
$fileRecruiters='Recruiters'.$extension.'?lang='.$langpage;  
$fileCreditManagement='CreditManagement'.$extension.'?lang='.$langpage;
 
?>

Voici le code de mon fichier SectionRight_fr.php

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<aside id="AsideNews">
 
	<h2>Les "News"</h2>
		<span class="HLDate">11 février 2013</span>
 
	<span class="HLDate"></span>
 
	<h3 class="HLTitres">Construction du site <input type="image" name="button"
			src="Images/icon_fleche.png" alt="Suite"
			onclick="AfficherCacherBlocsCenterAside('Afficher2')">
	</h3>
 
	<article id="Afficher2">
		<h4 class "HLSousTitre">Mise en ligne/finalisation cette semaine</h4>
		<p>
		- page Credit Management<br> - page CV anglais <br>
		- page CV néerlandais<br>
		</p>
 
		<h4 class="HLSousTitre">Javascript</h4>
		<p>
		programmation de la gestion des évenements onclick. 
		Concrètement gestion du click sur les boutons flèches.
		<p>
 
		<h4 class="HLSousTitre">PHP & MySQL</h4>
		<p>
		Apprentissage poussé du PHP et MySQL pour mettre en place
		un formulaire et une gestion de base de données sur mon site.
		</p>
 
	</article>
 
	<h3 class="HLTitres">Cours du soir <input type="image" name="button"
			src="Images/icon_fleche.png" alt="suite"
			onclick="AfficherCacherBlocsCenterAside('Afficher3')">
	</h3>
 
 
	<article id="Afficher3">En néerlandais UTF6 et en anglais UTF7
	</article>
 
	<h3 class="HLTitres">Recherche d'emploi <input type="image" name="button"
			src="Images/icon_fleche.png" alt="suite"
			onclick="AfficherCacherBlocsCenterAside('Afficher4')">
	</h3>
 
	<article id="Afficher4">Très motivé je postule sur de nombreux sites.
		Aussi bien dans le domaine du crédit que du reporting voire de l'analyse
		financière.
	</article>
 
	<h3 class="HLTitres">
		Traduction de CV <input type="image" name="button"
			src="Images/icon_fleche.png" alt="suite"
			onclick="AfficherCacherBlocsCenterAside('Afficher5')">
	</h3>
 
	<article id="Afficher5">Afin que les CV en anglais et en
		néerlandais ne souffrent aucune erreur j'ai demandé à des
		traducteurs de les relire'</article>
 
</aside> <!-- Fin AsideRight -->

Et voici le code mon fichier CodeWebSite.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/**
 * Code Javascript
 */
 
function CacherBlocsCenterChargement(id){
 
	document.getElementById("Afficher1").style.display = "none";
 
	}
 
function CacherBlocsAsideChargement(id,tag){
 
	var el_id=document.getElementById(id);
	var el_tag=el_id.getElementsByTagName(tag);
 
	for (var i=0; i<el_tag.length; i++){
 
		el_tag[i].style.display='none';
 
	}
}
 
 
function CacherBlocsCVChargement(id){
 
	document.getElementById("Exp2").style.display = "none";
	document.getElementById("Exp3").style.display = "none";
	document.getElementById("Exp4").style.display = "none";
	document.getElementById("Exp5").style.display = "none";
	document.getElementById("Exp6").style.display = "none";
	document.getElementById("Exp7").style.display = "none";
	document.getElementById("Exp8").style.display = "none";
	}
 
function AfficherCacherBlocsCenterAside(id){
 
	var BlocTexte = document.getElementById(id);
 
	var Etat = BlocTexte.style;
 
	if (Etat.display=="" || Etat.display=="none")
	{
	    Etat.display = "block";
 
	}
	else
	{
	    Etat.display = "none";
	}
 
	}
 
 
function CVAfficherCacherBloc(id1,id2){
 
	document.getElementById(id1).style.display="none";
	document.getElementById(id2).style.display="block";
 
 
	}

**RicardoBxl** · 11/02/2013, 21h47

Sekaijin,

Bon ben j'ai testé en mettant dans le CSS les article à display:none et je n'ai plus de problème. Tout fonctionne nickel. Merci.

Mais faudra quand-même m'expliquer pourquoi mon code Javascript ne fonctionnait pas. En tout cas j'aimerais ne pas mourir bête

D'ailleurs je pense que si mon site n'avait pas à gérer le multilinguisme je n'aurai pas eu ce souci parce que sous index.php le script fonctionne quelle que soit la langue. Et pareil pour CV.php mais uniquement en français.

Etrange

**SpaceFrog** · 12/02/2013, 08h17

l'objet n'est pas instancié au moment ou tu exécutes la ligne de code
d'ou le message d'erueur:

Erreur Javascript: TypeError Document.getElementById(...) is null

soit tu as une coquille dans les ids soit la ligne est interprétée trop tot .

**RicardoBxl** · 12/02/2013, 09h11

Cher SpaceFrog,

Merci pour ton commentaire

.

Je pense en effet que le problème est de cet ordre.

Mais comme je l'ai dit dans un post précédent j'ai solutionné mon problème en mettant dans mon fichier CSS tous les blocs à cacher en display:none.

Et lorsque l'on clique sur le bouton développer j'appelle une fonction javascript pour mettre modifier le style en écrivant display:block.

Mais pour revenir à l'idée du script Javascript de départ il est quand-même étonnant que pour le fichier index.php quelle que soit la langue choisie le script s'exécutait correctement.

Et pareil si je chargeais la fichier CV.php en français.

Si lors de l'appel de CV.php avec la paramètre lang=fr ca marche il paraît A PRIORI logique que cela doive marcher avec lang=en ou lang=nl non

?

Quoiqu'il en soit mon souci est résolu donc merci pour votre contribution à tous

DOM Mettre display=none au chargement d'une page

JavaScript

Discussions similaires

Partager

Partager