11548 sujets

JavaScript, DOM et API Web HTML5

Problème avec this.id sous IE

Bonjour à tous,

j'explique mon cas simplement :
j'ai une page html, avec 3 boutons et 3 paragraphes de texte
chaque bouton a un paragraphe qui lui correspond
au chargement de la page, aucun paragraphe n'est affiché
quand on clique sur un bouton, le paragraphe correspondant s'affiche.

en javascript, j'ai fait fait une fonction init() qui ajoute l'évènement click et la méthode appelée : showHide()
dans cette fonctionne, j'affiche le paragraphe selon l'appelant avec this.id (qui est l'identifiant du bouton)

ca marche très bien sous Firefox mais pas sous Internet Explorer

si vous pouviez m'aider, ou me proposer une meilleure solution, ce serait gentil

merci Smiley cligne
Modérateur
Bonjour evil ninja et bienvenue, Smiley smile

Peux-tu montrer ton code afin que nous puissions te venir en aide ? Il y a différentes manières de procéder et rien ne nous montre où peuvent être tes erreurs... Smiley cligne

Pour résoudre ton problème, je pense que ce sujet devrait t'intéresser...
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript">

        //ajout de la fonction init lors du chargement
	addEvent(window,'load',init);

        //fonction d'initialisation : ajout des fonctions showHide aux boutons
	function init(){

		HideAll();
		var itm_desc = document.getElementById('item_description');
		var itm_util = document.getElementById('item_utilites');
		var itm_dang = document.getElementById('item_danger');

		addEvent(itm_desc,'click',showHide);
		addEvent(itm_util,'click',showHide);
		addEvent(itm_dang,'click',showHide);

	}

        //fonction HideAll : cache tout les paragraphes
	function HideAll(){

		var txt_desc = document.getElementById("texte_description");
		var txt_util = document.getElementById("texte_utilites");
		var txt_dang = document.getElementById("texte_danger");
		var cadre = document.getElementById("cadre");
		txt_desc.style.display='none';
		txt_util.style.display='none';
		txt_dang.style.display='none';
		cadre.style.display='none';

	}

        //fonction showHide : affiche le paragraphe selon le bouton cliqué
	function showHide()
	{
		HideAll();
		var cadre = document.getElementById("cadre");
		cadre.style.display='block';[b]
                if(this.id=="item_description"){
			var txt_desc = document.getElementById("texte_description");
			txt_desc.style.display='block';
		}
		else if(this.id=="item_utilites"){
			var txt_util = document.getElementById("texte_utilites");
			txt_util.style.display='block';
		}
		else if(this.id=="item_danger"){
			var txt_dang = document.getElementById("texte_danger");
			txt_dang.style.display='block';
		}[/b]
	}
</script>


<!-- code HTML -->
<body>

<!-- paragraphes -->
   <p id="texte_description">
		Description	
   </p>

   <p id="texte_utilites">
		Utilités
   </p>

   <p id="texte_danger">
		Danger
   </p>


<!-- Menu  -->
<ul id="nav_liste">
   <li id="item_description">Description</li>
   <li id="item_utilites">Utilités</li>
   <li id="item_danger">Danger!</li>
</ul>


</body>


voilà, je ne suis pas très fort en javascript, soyez indulgent Smiley langue
merci
Voici un exemple de code qui fonctionne comme ce que tu souhaite faire, sous Firefox et IE (7) :


<html>
<head>
<script tye="text/javascript">
	addEvent(window,'load',init);
	function init(){
		var btn_displayDiv = document.getElementById("button_diplayDiv");
		addEvent(btn_displayDiv,'click',div_showHide);
	}
	function div_showHide(event){
		var idButton;
		if(event.target)
			idButton=event.target.id;
		else
			idButton=event.srcElement.id;
			
		var idDiv;
		if(idButton=="button_diplayDiv"){
			idDiv="div_displayDiv";
		}
		var div=document.getElementById(idDiv);
		var isDisplayDiv = div.style.display=="block";
		if(isDisplayDiv)
			div.style.display="none";
		else
			div.style.display="block";
	}
	
	function addEvent(oElem, sEvType, fn){
		return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, false):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
	}
</script>
</head>
<body>
<input id="button_diplayDiv" type="button" value="Display Div"/>
<div id="div_displayDiv" style="display: none">
Hello World !
</div>
</body>
</html>


Tu remarquera que dans la fonction div_showHide, au lieu d'utiliser comme toi this.id pour récupérer l'id de l'élément à l'origine de l'évenemment, j'uilise l'objet Event passé en paramètre de ta fonction qui va traiter l'évenement...

Selon le standard W3C, cet objet Event contient une propriété target qui est une référence au noeud à l'origine de l'évenement.
Malheureusement, IE à sa propre implémentation de l'objet Event, il n'existe pas sous ce navigateur de propriété target et c'est la propriété srcElement qui lui correspond. Tu dois tester et utiliser la propriété adéquate pour récupérer l'id de ton element à l'origine de l'événement.

Pour plus d'info, tu peux consulter ce cours sur les événements JS (notamment l'objet Event et ses différences IE/Firefox).
Sujet clos
Aller à