[Résolu] Boucle for

Bonjour,

J'ai un nombre N (qui peut varier, mais toujours inférieur ou égal à 100) de DIVs cachés par défaut.
Je cherche à ce que lors d'un clic sur un bouton, seule la DIV concernée s'affiche et que toutes les autres restent cachées ou se cachent si elles sont visibles.

Pour ce faire, j'utilise le script suivant qui ne fonctionne pas :

function afficheConv(id) { 
    for(var i=0; i<=100; i++){ 
        if(i==id){document.getElementById('msg_'+i).style.display = 'block';}
        else{document.getElementById('msg_'+i).style.display = 'none';} 
    }  
}

Je récupère bien la variable id, mais ma variable i n'a pas l'air de s'incrémenter.
Quelqu'un peut m'expliquer mon erreur ?

Merci !
Modifié par xtense (28 Feb 2011 - 15:51)

Bonjour,

Tu n'as pas d'erreur dans la console JavaScript?
Tu as fait des tests élémentaires, par exemple en utilisant console.log() pour vérifier que la valeur de i s'incrémentait bien?

En passant:
- D'après ton code tu vas boucler 101 fois, pas 100 fois.
- La bonne pratique c'est de boucler sur des éléments qui sont déjà dans le DOM. Ça évite de faire des choses bancales comme document.getElementById('msg_'+i).

Il ne semble pas y avoir d'erreur javascript sauf celles liées au fait que ma variable i ne s'incrémente pas...

Est-ce que toute les div avec id : msg_1 ... à msg_100 existent ?
C'est le seul truc que je vois qui peut faire cracher ta boucle.

On peut voir une page ?

Alors effectivement toutes les divs n'existent pas nécessairement.
Il s'agit de conversations dans le cadre d'un chat privé. Je peux définir un nombre maximum, mais au moment ou le script est exécuté, je n'ai pas l'info sur le nombre de conversations en cours.
C'est donc bien ce qui doit faire planter la boucle !

Comment contrecarrer ce problème ? (faire en sorte que i s'adapte au nombre de conversations ouvertes...)

Merci pour ces infos en tout cas !

xtense a écrit :
Comment contrecarrer ce problème ? (faire en sorte que i s'adapte au nombre de conversations ouvertes...)

En bouclant sur les éléments qui existent réellement.
C'est à dire qu'au lieu de boucler sur un compteur qui va de 0 à 99, tu vas récupérer un tableau avec tous les éléments concernés (par exemple en utilisant document.getElementsByClassName dans les navigateurs modernes, ou en utilisant une fonction utilitaire qui donne un résultat proche dans tous les navigateurs.

Un document.getElementsByTagName(div'); ne serai-t-il pas mieux adapté au cas présenté ?

Julien de Prabere a écrit :
Un document.getElementsByTagName('div'); ne serai-t-il pas mieux adapté au cas présenté ?

Et sélectionner ainsi tous les éléments DIV de la page, sans distinction? Je ne pense pas.
Si les éléments sur lesquels on veut boucler sont tous enfants d'un même élément qui a un identifiant, sont des DIV, et ne contiennent pas d'autres DIV, on peut éventuellement faire:

document.getElementById('le-parent').getElementsByTagName('div')

Merci pour vos retours que j'ai pris en compte et j'ai maintenant

function afficheConv(id) { 
    var lmnts = document.getElementsByClassName('messages');
    for(var i=0; i<lmnts.length; i++){ 
      if(i==id){document.getElementById('msg_'+i).style.display = 'block';}
      else{document.getElementById('msg_'+i).style.display = 'none';} 
    }
}

Malheureusement ça ne fonctionne toujours pas...
Ma boucle plante et je ne comprends pas pourquoi. J'ai pourtant bien une longueur de 8 (8 conversations effectivement ouvertes pour les tests) dans lmnts.length...

Problème résolu... une erreur dans l'ID que je transmettais aïe aïe aïe...
Merci beaucoup pour vos réponses qui font que ça fonctionne très bien maintenant !

Pour info, vu que tu récupères les éléments, pas besoin d'utiliser getElementById (et des id du type msg_1, msg_2, etc.):

function afficheConv(id) {  
    var lmnts = document.getElementsByClassName('messages'); 
    for(var i=0, max=lmnts.length; i<max; i++){  
        if(i==id){lmnts[i].style.display = 'block';} 
        else{lmnts[i].style.display = 'none';}  
    }
}

[/i][/i]
Modifié par fvsch (01 Mar 2011 - 18:15)