classe appelée avec javascript

Sujet résolu

9 février 2010 à 11:08:02

Bonjour,

Je ne comprends pas pourquoi ma classe "exemple" que j'appelle avec javascript n'est pas activée.
En effet, lorsque je passe avec la souris sur les boutons, je m'attends à ce que du texte soit écrit dans un rectangle orange; au lieu de ça, tout se passe comme si d'autres boutons étaient créés !
Pouvez-vous m'expliquer pourquoi ?

Voici mon code XHTML

<body>

<div id="menu"> 
<div id="centre">	
</div>
 <ul>
  <li id="item1" onmouseover="flag(1)" onmouseout="flag(0)">Air transport challenges surveys</li>
  <li id="item2" onmouseover="flag(1)" onmouseout="flag(0)">Operational Concept Definition</li>
 </ul>
</div>

</body>
</html>

Voici mon code CSS

#menu li
{
 list-style-type: none;
 margin-left: 200px;
 list-style-position: inside;
 text-align: center;
 width: 102px;
 height: 102px;
 padding-top: 26px;
 background-image: url("derive_logo_ADV.png");
 background-repeat: no-repeat;
 color: white;
 font-weight: bold;
 font-size: 0.9em;
}
#menu
{
 border: 10px solid orange;
margin-left: 500px;  
margin-top: 100px; 
height: 100px;
 width: 200px;
}
.exemples
{
 background-image: none;
 color: blue;
  width: 20px;
 height: 20px;
 }

Voici mon code javascript

function flag(type){

		for (i = 1; i < 3; i += 1){
			var elmt = document.getElementById("item" + i);
			if( type == i ){
				elmt.style.backgroundImage= 'url("derive_logo_ADV_rond_copie_entoure.png")';
			}
			if( type == 0 ){
				elmt.style.backgroundImage= 'url("derive_logo_ADV.png")';
			}
		}	
		
		var paragraphe = document.getElementById("menu");	
		var eltUl = document.createElement("ul"); 
		
		if( type == 1 ){
			
			paragraphe.appendChild(eltUl);
			
			var eltLi1 = document.createElement("li"); 
			eltLi1.className = "exemples";
			eltUl.appendChild(eltLi1);
			var texte1 = document.createTextNode("detailed radiography");
			eltLi1.appendChild(texte1);

			
			var eltLi2 = document.createElement("li"); 
			eltLi2.className = "exemples";
			eltUl.appendChild(eltLi2);
			var texte2 = document.createTextNode("identification of the principal drivers");
			eltLi2.appendChild(texte2);
		}
		if( type == 0 ){	
			paragraphe.removeChild(eltUl);
		}	
}

birdy42

9 février 2010 à 11:19:05

Est-ce que tu as une erreur dans la console d'erreurs ? (Outils > Console d'erreurs dans Firefox; Clic sur le petit triangle jaune en bas à gauche > Détails dans IE)

stephzero

9 février 2010 à 11:24:35

Oui birdy42, j'ai ce message

Erreur : uncaught exception: [Exception... "Node was not found" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location: "http://localhost/java%20script/menu%20circulaire%203/flag.js Line: 36"]

sachant que line 36 correspond à

paragraphe.removeChild(eltUl);

birdy42

9 février 2010 à 12:36:09

alert(paragraphe) ?

stephzero

9 février 2010 à 12:53:58

Si je le fais juste après la ligne de commande qui est indiquée dans l'erreur, j'obtiens le message suivant

[object HTMLDivElement]

Mais si dans mon script "flag", ç l'intérieur des "if", j'écris ceci

eltLi1.style.backgroundImage = "none";

ça marche, ça suprrime bien l'image !

Mais bon, vu que j'ai beaucoup de puces à créer, et que ce n'est pas la seule modification, ce serait fastidieux

Golmote

9 février 2010 à 13:00:16

Tu essaies de supprimer un noeud que tu n'as jamais inséré... :-°

stephzero

9 février 2010 à 13:24:04

bah si puisque à un moment je fais:

paragraphe.appendChild(eltUl);

(si le flag vaut 1 cad si je passe avec la souris sur le cercle)

Golmote

9 février 2010 à 13:42:06

Justement, si le flag vaut 1, tu crées et tu insères. (Là tout va bien)

Et si le flag vaut 0, tu crées et tu supprimes.
Alors qu'à mon avis, tu voudrais récupérer celui précédemment créé quand le flag valait 1 et le supprimer... :-°

stephzero

9 février 2010 à 13:46:25

oui, c'est exactement cela ! Mais je fais commment ?

j'ai remodifié la partie de code comme ce qui suit mais ça ne marche pas non plus

var paragraphe = document.getElementById("menu");	
		
		
		
		if( type == 1 ){
			var eltUl = document.createElement("ul"); 
			paragraphe.appendChild(eltUl);
			
			var eltLi1 = document.createElement("li"); 
			eltLi1.style.backgroundImage = "none";
			eltUl.appendChild(eltLi1);
			var texte1 = document.createTextNode("detailed radiography");
			eltLi1.appendChild(texte1);

			
			var eltLi2 = document.createElement("li"); 
			eltLi2.className = "exemples";
			eltUl.appendChild(eltLi2);
			var texte2 = document.createTextNode("identification of the principal drivers");
			eltLi2.appendChild(texte2);
		}
		
		if( type == 0 ){	
			var getU1 = document.getElementById("u1");
			paragraphe.removeChild(getUl);
		}

Golmote

9 février 2010 à 14:00:41

Bah en gros l'idée, c'est ça...

Mais il faudrait que tu définisses un id à la création de l'élément xD

stephzero

9 février 2010 à 14:19:26

excusez moi, je ne comprends pas :
"il faudrait que tu définisses un id à la création de l'élément xD "

Ca veut dire quoi xD ?

Par ailleurs, à la ligne

paragraphe.removeChild(getUl);

J'ai un message: getUl is not defined alors que juste avant, je viens de la définir par la déclaration:

var getUl = document.getElementById("ul");

Golmote

9 février 2010 à 15:42:06

Bah justement... tu tentes de récupérer l'élément ayant pour id "ul"...

Mais à aucun moment (lors de la création de l'élément) tu ne lui as donné un id quelconque... :-°

Citation

excusez moi

Houla malheureux, ne me vouvoies pas, ça me rajoute 20 ans dans la face

stephzero

9 février 2010 à 16:29:33

Merci beaucoup Golmote pour ton aide et ta patience, je m'en suis sorti finalement !

Merci aussi à birdy42 !