11548 sujets

JavaScript, DOM et API Web HTML5

This.parentNode.id ?

Bonjour a tous,

Petit soucis avec IE, je ne parviens pas a rendre le code valide sous IE !


<script language="javascript" type="application/javascript">
function Navigation(menuid)
{
	var submenu   = document.getElementById('sub'+menuid);
	var statemenu = submenu.style.display;
	if(statemenu == 'none')
	{
		submenu.style.display = 'block';
		return true;
	}
	if(statemenu == 'block')
	{
		submenu.style.display = 'none';
		return true;
	}
}
</script>




<div id="menu1" class="nav-menu">
    <div id="lien1" class="nav-lien" onclick="Navigation([#red]this.parentNode.id[/#]);">Lien 1</div>
    <div id="submenu1" class="nav-submenu" style="display:none;" onmouseout="Navigation(this.parentNode.id);">
        <div style="height:20px;">Sub Lien 1</div>
        <div style="height:20px;">Sub Lien 2</div>
        <div style="height:20px;">Sub Lien 3</div>
        <div style="height:20px;">Sub Lien 4</div>
    </div>
</div>


Bon, c'est du code tout simple, seulement this.parentNode.id n'est pas accepté tel quel dans IE a priori (je précise IE8).

J'ai un peu regarde par google, j'ai trouvé des commentaires indiquant que cela ne peut fonctionner que dans certain cas ... et d'autre exemple avec "node.parent ..." mais pas moyen d'avoir un code fonctionnel avec du bricolage ^^

D'avance merci de ne pas proposer l'utilisation de navigateur alternatif ou de version récente. Je suis en contexte professionnel verrouillé.
Ne pourrais-tu pas envoyer le noeud parent (pas l'id) et parcourir dans ta fonction ses enfants jusqu'à tomber sur le bon ?
éventuellement, si tu aurait un bout de code a me proposer, je serai preneur.

Je vois l'idée, mais c'est la pratique de la syntaxe qui va me poser problème.

Je vais me renseigner en ce sens pendant ce temps.
Quand je fais : alert(this.parentNode);

Il me dit bien que je pointe sur un objet div HTML

Mais dés que j'essai de passer l'objet a une fonction :

-> onclick="var elem=this.parentNode;Nav(elem);">
ou
onclick="Nav(this.parentNode);">

IE m'envoie "Objet Attendu".

J'ai essayé "this" tout seul, j'ai essayé "this.id" ... tout fonctionne quand je mes onclick="alert(...);"

Dés que je veux le passer a une fonction, je n'ai que "Objet Attendu" ...

Je ne comprends plus trop. J'ai essayé plein d'orthographe différente pour le nom de ma fonction, pensant que cela pouvait être bloquant. Seul IE rejète. Sous Chrome, tout mes essaies fonctionnent.

Là je suis un peu coincé.
Avec quelque chose de ce type ?

<script language="javascript" type="application/javascript">
function Navigation(menuParent){
    var submenu = menuParent.firstChild;
    while(submenu.id != 'sub' + menuParent.id && submenu.nextSibling)
        submenu = submenu.nextSibling;
    
    if (subMenu.id == 'sub' + menuParent.id) {
        var statemenu = submenu.style.display;
        if(statemenu == 'none') {
            submenu.style.display = 'block';
            return true;
        }
        if(statemenu == 'block') {
            submenu.style.display = 'none';
            return true;
        }
    }
}
</script>



<div id="menu1" class="nav-menu">
    <div id="lien1" class="nav-lien" onclick="Navigation(this.parentNode);">Lien 1</div>
    <div id="submenu1" class="nav-submenu" style="display:none;" onmouseout="Navigation(this.parentNode);">
        <div style="height:20px;">Sub Lien 1</div>
        <div style="height:20px;">Sub Lien 2</div>
        <div style="height:20px;">Sub Lien 3</div>
        <div style="height:20px;">Sub Lien 4</div>
    </div>
</div>


D'ailleurs, ne pourrait-on pas directement envoyer la div qui se situe juste après celle qui contient "Lien 1" avec (this.nextSibling.type == 1 ? this.nextSibling : this.nextSibling.nextSibling) si on est sûr qu'il y a un sous-menu ?
De plus, cela éviterait d'avoir à rechercher le noeud dans le DOM...
Modifié par Gothor (30 Jan 2012 - 16:15)
Non, rien ne fonctionne,

La console Javascript IE retour "Objet Attendu" à l'éxécution de l'évènement "onclick".

Je ne comprend pas pourquoi IE mes sans cesse, "Objet Attendu" ...

Sous Chrome, cela fonctionne.
J'avais fait une erreur dans le code, il faut remplacé subMenu par submenu dans le if après le while.
Le code semble fonctionner chez moi (IE8)
Sujet clos
Aller à