getElementById qui ne marche pas

**ChTiRiBi** · 22/04/2010, 18h02

Bonsoir, j'ai une page index.xhtml qui contient 4 boutons, je veux qu'à chaque fois que je clique sur un de ces boutons, l'image de la bannière change selon le bouton, ainsi chaque bouton a sa propre image qui lui ai associé dans la bannière.
J'ai fait une fonction javascript que voici:

Code :

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

1
2
3
4
5
function changeImg(){
	alert ('bouton clique1');
	document.getElementById("ban").value = "/img/banner1.gif";
		alert ('bouton clique2');
}

voici le code d'un des bouton:

Code :

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

<div class="bt1"><s:link><h:graphicImage border="0" alt="epave" value="/img/bt-epave.gif" onclick="changeImg()"></h:graphicImage></s:link></div>

mon problème est que quand je clique sur le bouton l'image ne change pas, j'ai les 2 alertes qui s'affichent donc le problème vient surement de mon getElementById mais je vois vraiment pas ou?.
Merci d'avance pour votre aide.

**Michelk12** · 22/04/2010, 18h26

Bonjour,

Je te conseil d'afficher ta page index.html et de cliquer-droit afin d'afficher le code source de celle-ci.
En recherchant dans ce code, retrouve l'emplacement de ton "ban" et ainsi tu vois la valeur de l'ID.

Est-ce ID="ban" ou autre chose ?

Michel

**ChTiRiBi** · 22/04/2010, 18h46

c'est bien id="ban" dans le code généré de la page

**Michelk12** · 22/04/2010, 18h54

Au fait, c'est pour une image?

Ce n'est pas

Code :

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

document.getElementById("ban").src = "/img/banner1.gif";

Ce serait mieux de mettre un chemin relatif, par exemple :

Code :

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

document.getElementById("ban").src = "./img/banner1.gif";

Si ce n'est pas cela, je laisse à d'autres...

Michel

**ChTiRiBi** · 22/04/2010, 18h58

oui c'est bien sa, mais j'ai un nouveau problème maintenant, l'image change mais quand je clique sur OK du 2ém pop-up l'ancienne image revient

**Michelk12** · 22/04/2010, 19h07

La deuxième popup... ha oui le 2ème alert!

Tu ne pourrais pas me faire parvenir ton fichier?
Sinon que se passe-t-il au retour de la procédure?
Quelque chose est-il rechargé?

**ChTiRiBi** · 22/04/2010, 19h09

Bon voila le code de mon fichier:

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
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j">
<script language="javascript">
function changeImg(){
 
	document.getElementById("ban").src="./img/banner1.gif";
 
}
	</script>
 
	<div id="header-top">
		<div class="langDate">
			<div class="anglais"><h:graphicImage value="/img/flag-en.gif" /><s:link>English</s:link></div>
			<div class="separateur"><h:graphicImage value="/img/sep.jpg" alt="separateur" style=" width : 2px;" /></div>
			<div class="arabe"><h:graphicImage value="/img/flag-tn.gif" /><s:link>عربي</s:link></div>
			<div class="dateCol">
				Mardi 25 Mars 2008 / 10:17 
			</div>
		</div>
 
	<div class="logo"><s:link action="#"><h:graphicImage value="/img/logo.jpg" border="0" /></s:link></div>
	<div class="banner">
		<div class="banner-arrondie"> </div>
		<h:graphicImage value="/img/banner1.jpg" alt="banner" id="ban" /></div>
	<div class="lien-top">
		<div class="bt"><s:link view="/index.xhtml"><h:graphicImage value="/img/bt-acc.gif" border="0" alt="accueil"  /></s:link></div>
		<div class="bt"><s:link><h:graphicImage border="0" alt="contact" value="/img/bt-contact.gif"/></s:link></div>
		<div class="liens">
			<div class="bt1"><s:link><h:graphicImage border="0" alt="epave" value="/img/bt-epave.gif" onclick="changeImg()"></h:graphicImage></s:link></div>
			<div class="bt1"><s:link><h:graphicImage border="0" alt="mer" value="/img/bt-mer.gif"/></s:link></div>
			<div class="bt1"><s:link><h:graphicImage border="0" alt="flotte" value="/img/bt-flotte.gif"/></s:link></div>
			<div class="bt1"><s:link><h:graphicImage border="0" alt="securite" value="/img/bt-securite.gif"/></s:link></div>
		</div>
	</div>
	</div>
</ui:composition>

notez que j'ai enlevé les 2 alert dans la fonction javascript

**vermine** · 23/04/2010, 07h55

Bonjour,

Ca veut dire quoi ceci ?

Code :

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

1
2
 
<s:link></s:link>

Ca recharge la page ? Si oui, alors c'est normal qu'on obtienne l'image par défaut.

**Michelk12** · 23/04/2010, 08h31

Hello Vermine

Cela me fait penser à une page générée par un outil à la sauce Joomla.

Michel

**ChTiRiBi** · 26/04/2010, 10h29

Envoyé par vermine

Bonjour,

Ca veut dire quoi ceci ?

Code :

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

1
2
 
<s:link></s:link>

Ca recharge la page ? Si oui, alors c'est normal qu'on obtienne l'image par défaut.

non sa ne recharge pas la page c'est équivalant à la balise <a>

**Matthieu2000** · 27/04/2010, 14h27

http://www.roseindia.net/jsf/graphicImage.shtml

regarde le code html généré!

**SpaceFrog** · 27/04/2010, 15h07

encore faut il pouvoir charger la page...
y'a une enfilade de balises link par fermées .....

**vermine** · 27/04/2010, 15h15

Non, non, Space Frog, elles sont toutes fermées. Ne te fais pas avoir par les couleurs.

**SpaceFrog** · 27/04/2010, 15h19

de mon coté j'ai ça :

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
<html>
<head>
<link href="" id="aepref-styles.css.tables.enabled">
<link href="" id="aepref-styles.author.css.enabled">
<link href="" id="aepref-styles.css.tags.enabled">
<link href="" id="aepref-styles.css.tables.enabled">
<link href="" id="aepref-styles.author.css.enabled">
<link href="" id="aepref-styles.css.tags.enabled">
<link href="" id="aepref-styles.css.tables.enabled">
<link href="" id="aepref-styles.author.css.enabled">
<link href="" id="aepref-styles.css.tags.enabled">
<link href="" id="aepref-styles.css.tables.enabled">
<link href="" id="aepref-styles.author.css.enabled">
<link href="" id="aepref-styles.css.tags.enabled">
</head>
<body>
</body>
</html>

je ne vois aucune balise link fermée ...

**Matthieu2000** · 27/04/2010, 15h19

Envoyé par vermine

Bonjour,

Ca veut dire quoi ceci ?

Code :

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

1
2
 
<s:link></s:link>

Ca recharge la page ? Si oui, alors c'est normal qu'on obtienne l'image par défaut.

Code :

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

xmlns:s="http://jboss.com/products/seam/taglib"

c'est le code source côté serveur!

**vermine** · 27/04/2010, 15h22

Han d'accord, au temps pour moi, je n'ai pas regardé cette page.

Fais chaud, hein ?

**ChTiRiBi** · 28/04/2010, 11h08

heeu quelqu'un sait pourquoi sa me remet l'ancienne image? et comment y remédier?

**SpaceFrog** · 28/04/2010, 11h34

rechargement de page = pertes des données javascript, réinitialisation de page

**ChTiRiBi** · 28/04/2010, 11h51

mais je n'ai pas mis de commande qui recharge la page

**SpaceFrog** · 28/04/2010, 11h54

ben un link recharge la page non ?

getElementById qui ne marche pas

JavaScript

Discussions similaires

Partager

Partager