Manipulation fichiers XML avec javascript

Version imprimable

Bonjour,

Je débute en javascript et je cale sur la manière de récupérer mes données xml à partir de fonctions javascript. L'affichage se passe normalement quand la fonction affichageCours est appelée depuis une page html. Ensuite, j'essaie de passer myCours[i] en paramètre à une autre fonction via(onclick =\"affichagePages("+ myCours[i]+")\"), et c'est là que ça coince. J'ai le message d'erreur suivant dans firebug: SyntaxError: missing ] after element list.
Je ne vois pas trop où se situe le problème...
Voici ma fonction javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function affichageCours(target,level){
	//AFFICHAGE TITRE =>s'affiche correctement
	var h2_field = document.getElementById("title").getElementsByTagName("h2")[0];
	h2_field.innerHTML =target[0].getAttribute("title");
	var p_field = document.getElementById("title").getElementsByTagName("p")[0];
	p_field.innerHTML= " Auteur: " +target[0].childNodes[0].nodeValue;
	//AFFICHAGE PAGE
	document.getElementById("affichageCours").innerHTML="";
	var myCours= target[0].getElementsByTagName(level);
	for(var i = 0;i<myCours.length;i++){
		document.write(myCours[i].childNodes[1].childNodes[0].nodeValue);
		document.getElementById("affichageCours").innerHTML+= "<li onclick =\"affichagePages("+ myCours[i]+")\">"+myCours[i].getAttribute('title')+"</li>";
	}	
}

Et mon fichier xml

Code:

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
<!-- Edited by not again you -->
<user title="Vos cours">
	John
	<cours title = "Cours de couture expérimentale">
 
		<page title="Sommaire du cours" model="sommaire">		
			<entry>Sommaire</entry>
			<entry>chap 2</entry>
			<entry>chap 3</entry>
		</page>
		<page title="Un peu de pratique!" model ="exercicesImages">
			<answers>apple</answers>
			<answers>banana</answers>
			<answers>blackberry</answers>
			<answers>clementine</answers>
			<answers>coconut</answers>
			<answers>strawberry</answers>
			<questions>apple.png </questions>
			<questions>banana.png</questions>
			<questions>blackberry.png</questions>
			<questions>clementine.png</questions>
			<questions>coconut.png</questions>
			<questions>strawberry.png</questions>
		</page>
		<page title="Un peu de théorie!" model ="content">
			<content>Beaucoup de blabla.</content>
			<content>Et puis encore un peu</content>
		</page>
 
	</cours>
	<cours title="Cours de navigation en eaux troubles">
		<page title ="sommaire du cours" model ="sommaire">
			<entry>Sommaire</entry>
			<entry>chap 2: prérequis</entry>
			<entry>chap 3: la navigation en question</entry>
		</page>
		<page>
			<title>Prérequis</title>
		</page>
		<page>
			<title>La navigation en question.</title>
		</page>
	</cours>
 
</user>

Merci pour vos réponses,

Michel.

04/12/2014, 13h01
SpaceFrog

déja quand je vois un document.write, je ne m'étonne de rien

voir http://blog.developpez.com/web/p1065..._en_javascript

ensuite la console firebug te donne la ligne à laquelle il a trouvé l'erreur ... visiblement il manque un ] avant ...

Le problème c'est que tu ne peux pas passer une référence directe sur l'élément myCours[i] dans un attribut onclick, car tout est converti en chaîne. Du coup myCours[i] est converti avec sa méthode toString qui doit renvoyer quelque chose comme [object Element].

Tape [object Element] sans guillemets dans ta console JavaScript et tu auras le même message d'erreur : SyntaxError: missing ] after element list. C'est parce que l'interpréteur croit que tu veux déclarer un tableau.

Tu as un petit effort d'adaptation à faire pour résoudre ton problème : utiliser les méthodes du DOM telles que createElement et appendChild, au lieu de document.write et innerHTML.

En plus de ça tu vas te retrouver confronté au « problème du i qui va trop vite ». Une solution à ce nouveau problème est dans la FAQ. Une autre (qui n'est pas encore dans la FAQ) est d'utiliser la méthode forEach des tableaux :
Code:

1 2 3 4 5 6 7 var myCours = target[0].getElementsByTagName(level); Array.forEach(myCours, function(cours) { var $li = document.createElement('li'); $li.onclick = function() { affichagePage(cours); }; $li.appendChild(document.createTextNode(cours.getAttribute(title)); $affichageCours.appendChild($li); });
PS : J'ai oublié de dire que forEach n'est pas supporté par IE8, mais on peut facilement le rajouter à la main.

04/12/2014, 15h45
michelkey

Génial! ça marche. Merci beaucoup, et aussi merci pour les Cours JavaScript ;)