récupérer le champ d'un objet dans une balise IMG

**kersu** · 02/07/2013, 18h04

Bonjour,
Je dispose de 6 objets film et je souhaite remplir un tableau en montrant les 6 affiches de cinéma correspondantes. (Je souhaite normalement en afficher plus tard 480 et utiliser un .txt de data et faire un XMLHttpResquest)

voici le code :

Code html :

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

1
2
3
4
5
<HTML>
<HEAD>
<TITLE>Affiche un film</TITLE> 
 
<SCRIPT TYPE="text/javascript">

Code javascript :

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
function film(titre,annee,genre,lien,affiche)
{
	this.titre = titre;
	this.annee = annee;
	this.genre = genre;
	this.lien = lien;
	this.affiche = affiche;
}
 
var video = new Array();
 
video[0] = new film('4 minutes',2006,'drame','4 minutes.avi','images/4 minutes.jpg');
video[1] = new film('7 vies',2008,'drame','7 vies.avi','images/7 vies.jpg');
video[2] = new film('7h58 ce samedi là',2007,'drame','7h58 ce samedi la.avi','images/7h58 ce samedi là.jpg');
video[3] = new film('10,000 BC',2008,'aventure','10 000 BC.avi','images/10 000 BC.jpg');
video[4] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
video[5] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
 
function changeContenu() 
{
	document.write("<table>");
	for (i=0; i<6; i=i+3) 
	{
		document.write("<tr>");
		document.write("<td>");
		document.write("<img scr = "+video[i].affiche+"/>"; //marche pas
		document.write("</td>");
		document.write("<td>");
		document.write(video[i+1].affiche); //marque bien 10 000 BC.jpg par exemple
		document.write("</td>");
		document.write("<td>");
		document.write(video[i+2].affiche);
		document.write("</td>");
		document.write("</tr>");
	}
	document.write("</table>");
}

Code html :

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

1
2
3
4
5
6
</SCRIPT>
</HEAD>
<BODY onLoad = "changeContenu()">
<H1>1ere version de l'affichage d'un film</H1>
</BODY>
</HTML>

Comment peut on récupérer le champ d'un objet dans une balise IMG?
D'avance je vous remercie pour votre aide.

**NoSmoking** · 02/07/2013, 19h23

Bonjour,

document.write("<img scr = "+video[i].affiche+"/>"; //marche pas

il me semble qu'il manque une paranthése fermante.

En utilisant document.write tu t'exposes à de graves problème.

Comprendre document.write() en JavaScript

**SylvainPV** · 02/07/2013, 19h40

Bonjour,

Le problème est l'attribut de l'image: c'est "src" et non "scr".

Mais pour aller plus loin, je te propose quelques améliorations à ton code qui est quelque peu obsolète : tu peux oublier document.write, cette fonction est complètement désuette par rapport à ton besoin. De la même façon on n'utilise plus des tableaux pour la mise en page depuis des années, c'est très mal vu en web design.

Idéalement, je te conseillerais de t'intéresser au templating en Javascript, qui permet de générer facilement du HTML à partir d'objets Javascript, comme on pourrait le faire côté serveur en PHP ou JSP. Ce n'est peut-être pas le plus facile, mais comme j'aime à penser, autant faire les choses bien du premier coup.

La syntaxe la plus courramment utilisée en templating client est celle-ci : https://github.com/janl/mustache.js/
Voilà un exemple de ce que ça donnerait : http://jsfiddle.net/gxWCg/1/

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
 
<H1>1ere version de l'affichage d'un film</H1>
<section id="films">
 
</section>
<script id="films-template" type="text/html">
 {{#videos}}
    <div class="film">
        <img src="{{affiche}}">
        <p class="title">{{titre}} ({{annee}})</p>
        <p class="genre">Genre: {{genre}}</p>
        <a href="{{lien}}">Voir bande-annonce</a>
    </div>
{{/videos}}    
</script>

Code js :

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
 
function renderTemplate(containerId, data){
    var container = document.getElementById(containerId);
    var template = document.getElementById(containerId+"-template");
    container.innerHTML =  Mustache.render(template.innerHTML, { videos: data });
}
 
function film(titre,annee,genre,lien,affiche)
{
	this.titre = titre;
	this.annee = annee;
	this.genre = genre;
	this.lien = lien;
	this.affiche = affiche;
}
 
var video = new Array(); 
    video[0] = new film('4 minutes',2006,'drame','4 minutes.avi','images/4 minutes.jpg');
    video[1] = new film('7 vies',2008,'drame','7 vies.avi','images/7 vies.jpg');
    video[2] = new film('7h58 ce samedi là',2007,'drame','7h58 ce samedi la.avi','images/7h58 ce samedi là.jpg');
    video[3] = new film('10,000 BC',2008,'aventure','10 000 BC.avi','images/10 000 BC.jpg');
    video[4] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
    video[5] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
 
    renderTemplate("films", video);

**kersu** · 02/07/2013, 20h08

Tout d’abord merci pour vos deux réponses.

SylvainPV, je vais regarder ce soir le templating, je ne connaissais pas. Au regard de l'exemple de ce que ça donnerait : http://jsfiddle.net/gxWCg/1/, je pense que cela va le faire.

A tout à l'heure.

**Bovino** · 03/07/2013, 08h10

Utiliser document.write() sur le onload du <body>, c'est vraiment moche...

Comprendre document.write() en JavaScript...

**kersu** · 03/07/2013, 15h28

Bonjour SylvainPV, depuis hier j'essaye de décortiquer ton code, mais je comprends pas pourquoi en local, j'ai comme erreur : "null" a la valeur Null ou n'est pas un objet.

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
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
 
<HTML>
<HEAD>
<TITLE>Affiche un film</TITLE> 
 
<SCRIPT SRC="mustache.min.js"></SCRIPT>
 
//insertion class css
 
<SCRIPT TYPE="text/javascript">
 
 
function renderTemplate(containerId, data){
    var container = document.getElementById(containerId);
    var template = document.getElementById(containerId+"-template");
    container.innerHTML =  Mustache.render(template.innerHTML, { video : data });
}
 
function film(titre,annee,genre,lien,affiche)
{
	this.titre = titre;
	this.annee = annee;
	this.genre = genre;
	this.lien = lien;
	this.affiche = affiche;
}
 
var video = new Array(); 
    video[0] = new film('4 minutes',2006,'drame','4 minutes.avi','images/4 minutes.jpg');
    video[1] = new film('7 vies',2008,'drame','7 vies.avi','images/7 vies.jpg');
    video[2] = new film('7h58 ce samedi là',2007,'drame','7h58 ce samedi la.avi','images/7h58 ce samedi là.jpg');
    video[3] = new film('10,000 BC',2008,'aventure','10 000 BC.avi','images/10 000 BC.jpg');
    video[4] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
    video[5] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
 
    renderTemplate("films", video);
 
</SCRIPT>
 
</HEAD>

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
 
<BODY>
 
<H1>1ere version de l'affichage d'un film</H1>
<section id="films"></section>
<script id="films-template" type="text/html">
 {{#videos}}
    <div class="film">
        <img src="{{affiche}}">
        <p class="title">{{titre}} ({{annee}})</p>
        <p class="genre">Genre: {{genre}}</p>
        <a href="{{lien}}">Voir bande-annonce</a>
    </div>
{{/videos}}    
</script>
 
</BODY>
</HTML>

L'erreur pointe la ligne :

Code :

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

1
2
 
container.innerHTML =  Mustache.render(template.innerHTML, { video : data });

Mais je suppose que cela vient de la ligne :

Code :

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

1
2
 
var container = document.getElementById(containerId);

PS: j'ai bien la biblio mustache.min.js à la racine.
Je te remercie.

**Kaamo** · 03/07/2013, 15h46

Mustache n'est pas encore complètement chargé que tu tentes d'y accéder

récupérer le champ d'un objet dans une balise IMG

JavaScript

Vue hybride

Discussions similaires

Partager

Partager