Affecter un display:none sur plusieurs ID

27 déc. 2007, 13:09

Bonjour,

J'ai un petit souci en Javascript. J'ai créé deux boutons avec la balises paragraphes :

<p style="display: none;" id="box_article_aucune_famille" onclick="document.getElementById('question_article_aucune_famille').style.display='block'; document.getElementById('box_article_aucune_famille').style.display='none';">Cacher les familles non utilisables</p>
<p id="question_article_aucune_famille" style="display: block;" onclick="document.getElementById('question_article_aucune_famille').style.display='none'; document.getElementById('box_article_aucune_famille').style.display='block';">Afficher les familles non utilisables</p>

qui ont pour but de cacher ou d'afficher des <div> plus bas qui possèdent l'id "box_article_aucune_famille"

Cela marche bien mais que pour le bouton! Les div restent en effet affichés. Après quelques recherches cela n'affecte que le premier "id" de la page

Code : Tout sélectionner

<div style="display: block;" id="box_article_aucune_famille">
    <p style="text-align: left; padding-left: 2em; font-weight: bold; font-size: 120%;" title="Fluorescence atomique">
    <span style="cursor: help; padding-bottom: 16px;">AF</span>
    <img style="cursor: pointer;" src="themes/ewp/notebk/bu0496.ico" alt="" title="Créer la sous famille" border="0" height="32" width="32">
    </p>
    <hr>
</div>
                    

<div style="display: block;" id="box_article_aucune_famille">
     <p style="text-align: left; padding-left: 2em; font-weight: bold; font-size: 120%;" title="Demande biologique en oxygène">
     <span style="cursor: help; padding-bottom: 16px;">BOD</span>
     <img style="cursor: pointer;" src="themes/ewp/notebk/bu0496.ico" alt="" title="Créer la sous famille" border="0" height="32" width="32">
     </p>
     <hr>
</div>

Je travaille qu'avec FF 2.0. Comment faire pour affecter toute les div en une seule passe ?

27 déc. 2007, 13:25

un attribut "id" doit être unique sur une page !

Il te faut ruser un peu en ajoutant un id (identifiant) d'élement ou je ne sais quoi par id (attribut).

27 déc. 2007, 13:31

tu pourrait utiliser un name propre aux éléments qui doivent être effacés, ou encore une classe CSS.

27 déc. 2007, 16:07

Merci truc et Zeus de me répondre.

Pour répondre à Truc j'ai essayé mais mon problème réside dans le nombre de div à "effacer" (j'en ai afficher que 2 mais il y en a en tout une 40n). Je garde quand même l'idée car je pense qu'avec une fonction ca dois se faire même si je ne sais pas encore comment.

Pour répondre à Zeus (cette fois pas d'écriture en gras

) c'est vers cette voie que je me suis tourné mais quand j'ai essayé de faire document.getElementbyClass('...'), FF me retourne que la fonction n'existe pas. Je pense de ce côté qu'il s'agit d'un problème d'écriture (et donc de mes connaissances

). Comment modifier un display: block vers un display:none sur une class CSS via javascript ?

PS. Au fait j'ai cela qui s'affiche sur votre site : uncaught exception: Permission refusée d'appeler la méthode Location.toString

27 déc. 2007, 16:38

A vrai dire je n'ai même pas lu ton 1er message... j'ai vu deux attributs id c'est tout mais le souci était est bien la

Si tu te tournes vers les "class" tu modifieras tous les paragraphes (ayant l'attribut en commun) en même temps.
getElementsByClassName() devrait renvoyer un tableau avec les éléments.

Très sommairement

var elem = getElementsByClassName("ouvrir");
for (... elem.length; i++ ...)
{
    elem[i].className = "fermer";
}

28 déc. 2007, 11:28

Bonjour Truc,

J'ai cherché un peu avec tes indications et j'ai conclu (car je ne le savais pas) que pour travaillé avec des class il fallait mettre d'abord créer une sorte de tableau sur lequel on pouvait travailler.
Aussi j'ai créé cela mais cela ne produit aucun effet.

Code : Tout sélectionner

function ChangeStyleClass(classe,type,valeur)
{
var divs = document.getElementsByClassName(classe);

for(var i=0; i<divs.length; i++)
    {
    if (type == 'display')
       {
       divs[i].style.display=valeur;
       }

    }
}

J'appelle la fonction via onclick="ChangeStyleClass('box_article_aucune_famille','display','none');" pour (essayer) d'affecter toute les <div> qui possède la class box_article_aucune_famille.

Où suis je dans l'erreur ?

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

28 déc. 2007, 11:59

L'attribut name peut ne pas être unique. Tu peux donc l'utiliser pour sélectionner plusieurs éléments similaires.

Voici un exemple rapide que tu peux adapter à tes besoins:

Code : Tout sélectionner

<div name="something[]" id="s1">1</div>
<div name="something[]" id="s2">2</div>
<div name="something[]" id="s3">3</div>

<script type="text/javascript">
var allElements = document.getElementsByName('something[]');
for (i=0;i<allElements.length;i++) {
    document.write('Élément #' + i + ' avec ID ' + allElements[i].getAttribute('id') + '<br>');
}
</script>

28 déc. 2007, 12:05

Bonjour Xenon_54 (gaz rare de Nancy ?),

Désolé mais je ne comprends pas pourquoi tu pars sur le "name". Cela affecte - t- il les "class" aussi ?

28 déc. 2007, 12:20

Selon ma compréhension, tu désires modifier les attributs CSS de tous les éléments portant l'ID "box_article_aucune_famille". Puisque un ID doit être unique, tu ne peux faire sélectionner plusieurs éléments en te basant sur son ID. Mais tu peux le faire avec son nom (name).

L'exemple montré permettant donc de faire une recherche avec un nom et de récupérer l'élément HTML via Javascript. Tu peux donc en modifier les attributs CSS comme bon te semble:

Code : Tout sélectionner

<div name="something[]" id="s1">1</div>
<div name="something[]" id="s2">2</div>
<div name="something[]" id="s3">3</div>

<script type="text/javascript">
function changeStyle() {
    var allElements = document.getElementsByName('something[]');
    for (i=0;i<allElements.length;i++) {
        allElements[i].style.color = 'blue';
        allElements[i].style.textDecoration = 'underline';
    }
}
</script>

<input type="button" value="Changez-moi en bleu souligné!" onclick="changeStyle()">

Tu peux donc modifier les styles mais aussi les class avec setAttribute().

Pour ce genre de manipulations avec le DOM, je te recommende l'utilisation de librairies Javascript tel que jQuery ou même YUI.

Note: Le Xenon porte le numéro 54.

28 déc. 2007, 12:44

Oui tu as tout a fais compris! Je vais essayer cela merci encore.
Merci encore pour les librairies. Moi qui essayé de réinventer la roue... Merci encore!

Note: Le Xenon porte le numéro 54.

Chimiste ? moi c'est plutôt de l'argon

EDIT :
Est ce que c'est normal que tu utilises des attributs de tableau dans le "name" ?

EDIT(2) : j'ai enlevé les [] et çà marche sous FF (je développe que sous FF pour ma boîte donc no pb).

Voici le code pour ceux que cela intéresse :
HTML

Code : Tout sélectionner

<p name="aucune_famille"
     style="cursor: pointer;"
     onclick="changeStyle('aucune_famille','display','none'); document.getElementById('question_article_aucune_famille').style.display='block';">Cacher les familles non utilisables
</p>
<p id="question_article_aucune_famille"
     style="display:none; cursor: pointer;"
     onclick="changeStyle('aucune_famille','display','block;'); document.getElementById('question_article_aucune_famille').style.display='none';">Afficher les familles non utilisables
</p>

<div style="display: block;" name="aucune_famille">
  <h1>Q0</h1>
</div>
<div style="display: block;" name="aucune_famille">
  <h1>Q1</h1>
</div>

et le javascript que j'ai adapté pour des utilisations ultérieures:

Code : Tout sélectionner

function changeStyle(nom,type,valeur) {
    var allElements = document.getElementsByName(nom);

    if (type == 'display')
       {
       for (i=0;i<allElements.length;i++)
           {
           allElements[i].style.display = valeur;
           }
       }
}

Merci encore à vous trois !

28 déc. 2007, 13:42

Mouah j'étais persuadé que la recherche des éléments par class avec "getElementsByClassName" existait

Apparemment c'est le cas mais pour FF3 revient d'ici 1 an

28 déc. 2007, 15:06

Mouah j'étais persuadé que la recherche des éléments par class avec "getElementsByClassName" existait

Et tu m'a laissé en galère !!!

C'est pas bien

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

28 déc. 2007, 17:58

v'la que j'me fait taper sur les doigts

28 déc. 2007, 23:33

v'la que j'me fait taper sur les doigts

Tu as sûrement vu ici:
http://developer.yahoo.com/yui/examples ... sname.html

@Aureusms Tu as raison, ça fonctionne sans variable tableau. J'ai dû confondre avec les <input> avec nom identique.

Affecter un display:none sur plusieurs ID

Qui est en ligne