Discussion :

[mormic]

Bonjour à tous
J'ai une page HTML ainsi:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<h3>Manoeuvre 0</h3>
        <div id="m0">
            <input type="text" class="equipe_add" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add">Adresse de l'équipement</label>
            <input type="radio" class="volet" name="equip0"/>
            <label for="volet">Volet</label>
            <input type="radio" class="local_relais" name="equip0"/>
            <label for="local_relais">Relais central</label>
            <input type="radio" class="distant_relais" name="equip0"/>            
            <label for="distant_relais">Relais distant --</label>
            <label for="n_relais">N° du relais</label>
            <input type="number" class="n_relais" maxlength="1" size="1" min="1" max="8"/>
        </div>

Ce code est répété 9 fois avec des div "m1" "m2" .... jusqu'à m9 et des name radio equip1 equip2.....equip9

je souhaite après saisie récupérer les infos dans des tableaux

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
let adEquipe= new Array(10);
let typeEquipe= new Array(10);
let numRelais= new Array(8);

Je doit utiliser des boucles mais je n'arrive pas à utiliser les sélecteurs CSS.

Si quelqu'un peut éclairer ma lanterne. Merci

[mathieu]

vous pouvez aussi récupérer les balises en utilisant leurs classes comme expliqué là :
https://developer.mozilla.org/fr/doc...ntsByClassName

si vous avez besoin de plus d'aide, montrez nous le code que vous avez testé ainsi que le résultat du débugage.

[mormic]

Merci pour votre aide
J'ai d'abord essayé cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function lectureSaisie(){
    for(let i=0;i<10;i++){             
        adEquipe[i]= document.querySelectord("#m" + i + "equipe_add").value; 
        numRelais[i]= document.querySelector("#m" + i + "n_relais").value;   
        for(let j=0;j<3;j++){
            let equipe = document.querySelectorAll( '#m' + i + '+ .input["name=equip" + i]');
            if(equipe[j].checked){
                typeEquipe[i]= equipe[j].value;
                break;
            }    
        }
    }
    alert("Adresse1 " + adEquipe[1] + " " + numRelais[1] + " " + typeEquipe[1]);
}

Mais ça ne fonctionne pas.
Je viens d'essayer cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
unction lectureSaisie(){
    for(let i=0;i<10;i++){   
        adEquipe[i]= document.getElementById("m" + i).getElementsByClassName("equip_add").value;         
        numRelais[i]= document.getElementById("m" + i).getElementsByClassName("n_relais").value;
        for(let j=0;j<3;j++){
            let equipe = document.getElementById('m' + i).getElementsByClassName('input["name=equip" + i]');
            if(equipe[j].checked){
                typeEquipe[i]= equipe[j].value;
                break;
            }    
        }
    }
    alert("Adresse1 " + adEquipe[1] + " " + numRelais[1] + " " + typeEquipe[1]);
}

Toujours rien ne s'affiche.

[NoSmoking]

Bonjour,
une première remarque concernant ton HTML, l'attribut for des <label> doit faire référence à une ID et uniquement une ID, or tes <input> n'en ont pas.

Maintenant concernant ta récupération tes « sélecteur complexe » n'ont rien de complexe, ils sont simplement mal écrits
"#m" + i + "equipe_add" va te donner

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
"#m0equipe_add"
"#m1equipe_add"
// ...

ce qui correspond à des ID au sens CSS de la chose.

Visiblement ce que tu cherches à obtenir c'est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
"#m0 .equipe_add"
"#m1 .equipe_add"
// ...

donc à réviser les sélecteurs CSS et correction du code ...

Ceci étant dit il me semble qu'un document.querySelectorAll(".equipe_add") te permettrait de tout récupérer d'un coup et ainsi dimensionner correctement tes tableaux !

[mormic]

l'attribut for des <label> doit faire référence à une ID et uniquement une ID, or tes <input> n'en ont pas.

Comme j'ai 10 fois le même masque de saisie avec 10 fois le même label, j'ai trouvé judicieux d'affecter ce label à une classe et cela fonctionne bien.
Mettre un id à chaque input de saisie fait perdre l'avantage de la recherche par index.

réviser les sélecteurs CSS

Je viens d'essayer cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
for(let i=0;i<4;i++){
        let x =  document.querySelector("#m" + i + " " + ".equipe_add");
        adEquipe[i]= x.value;
}

Mais toujours pas d'affichage.

[mathieu]

quand je teste votre code, je vois des messages d'erreur dans la console.
êtes-vous sûr de bien regarder au bon endroit ?