Sélectionner plusieurs ID avec queryselector

Version imprimable

Bonjour à tous
Je bute sur le problème suivant:
dans une page HTML, j'ai deux éléments span situés dans des div différents:

Code:

1
2
3
4
<div class="zone" id="zoneM3">
                .......................
                <span id="unitM" class="valeur"> </span>
            </div>

Code:

1
2
3
4
           <div class="zone" id="zoneP3">
                ..............
                <span id="unitP" class="valeur"> </span>
            </div>

Je veux mettre le même texte dans chacun des span's par javascript:

Code:

1
2
3
4
5
6
        if(capteur=="0"){
            document.querySelector("#unitM,#unitP").textContent="°C";
        }
        else if(capteur=="1"){
            document.querySelector("#unitM,unitP").textContent="%";
        }

Mais il n'y a que #unitM qui est chargé!
Alors que si je fais:

Code:

1
2
3
4
5
6
7
8
        if(capteur=="0"){
            document.querySelector("#unitM").textContent="°C";
            document.querySelector("#unitP").textContent="°C";
        }
        else if(capteur=="1"){
            document.querySelector("#unitM").textContent="%";
            document.querySelector("#unitP").textContent="%";
        }

Les deux sont bien chargés.
Que fais-je mal dans le premier cas?
Merci

21/10/2024, 18h49
NoSmoking
Bonjour,

Citation:

Que fais-je mal dans le premier cas?

tu ne lis pas la documentation pourtant claire ;)

Ressources :
- Document.querySelector
- Document.querySelectorAll()
21/10/2024, 19h34
mormic

Merci pour ta réponse
oui bien sûr, mea culpa.
Alors j'ai transformé mes deux id en class="unit" et ma commande JS en

Code:

document.querySelectorAll(".unit").textContent="°C"

Et maintenant plus rien ne s'affiche.
Surement encore quelquechose de pas lu!
22/10/2024, 11h30
SpaceFrog

querySelectorAll retourne une collection...
textContent n'est pas une propriété d'une collection mais d'un element de la collection ...
22/10/2024, 15h10
domi65
Ce que t'explique rapidement la Grenouille de l'espace ;-) , c'est qu'il te faut "boucler" sur les éléments de cette collection. La boucle "for of" est particulièrement indiquée pour les collections.
Tu peux donc faire tout simplement ceci :
Code:

1 2 3 4 for(let e of document.querySelectorAll('.unit')) { e.textContent += "°C" }
Au passage, tu noteras que j'ai mis += "°C" et non = "°C". Sinon le texte (un nombre, j'imagine) est remplacé.

Pour répondre à la question originale, qui relève plus du CSS que de Javascript, puisque l'argument est un sélecteur CSS, il suffit de séparer les identifiants par des virgules.

Merci pour ces éclaircissements. Il est vrai qu'il y a beaucoup de choses à lire pour un bricoleur pour aboutir à un résultat viable. Et toute cette masse d'information, il faut la retenir au fil des différents projets. Et parfois il y a des problèmes de compréhension comme le choix du Javascript ou du CSS. Je comprends parfaitement les fonctions dédiées aux HTML, CSS, et Javascript. Mais lorsqu'on a des fonctions Javascript dont le résultat doit modifier la présentation de la page, je vois mal comment écrire cela en CSS?

Bien, j'ai tenté de mettre en application vos dernières infos, mais le résultat n'est pas bon:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 let capteur; let listeRadioCapteurs = document.querySelectorAll(".capteurs"); listeRadioCapteurs.forEach(function(cap){ cap.addEventListener("change",function(fcap){ if(this.checked){ //si un radio capteur est sélectionné capteur=this.value; } for(let x of document.querySelectorAll(".unit")){ if(capteur=="0"){ x.textContent="°C"; } else if(capteur=="1"){ x.textContent="%"; } else if(capteur=="2"){ x.textContent="hPa"; } else if(capteur=="3"){ x.textContent="Lx"; } } }) })
Je n'ai pas mis += car la class 'unit' est une zone d'affichage uniquement.
Résultat: les différentes zones de class 'unit' ne sont pas modifiées.

23/10/2024, 14h57
domi65

« Mais lorsqu'on a des fonctions Javascript dont le résultat doit modifier la présentation de la page, je vois mal comment écrire cela en CSS? »
Bonjour. Je suppose que cet extrait répond à cette remarque :
« Pour répondre à la question originale, qui relève plus du CSS que de Javascript »
Il semblerait que tu m'aies mal compris. Bien sûr que c'est avec du JS que tu vas modifier la page. Mais ta question (du moins son titre) était : « Sélectionner plusieurs ID avec queryselector »
La fonction queryselector attendant comme argument un sélecteur CSS, on lui passe l'argument CSS correspondant à ce qu'on veut sélectionner. Pour passer le bon argument, il faut connaître... le CSS. « Sélectionner plusieurs ID » relève donc du CSS.
De même qu'il faut connaître le HTML pour passer le bon argument à la fonction insertAdjacentHTML.

C'est clair maintenant ?

On aurait plus de facilité à comprendre ce que tu cherches à faire si tu nous fournissais le code HTML actuel.

Cordialement.

Bonjour

Ton dernier code semble presque correct (le test if(this.checked) n'est pas nécessaire) mais tu ne précises pas en quoi le résultat n'est pas bon.
Quel est le résultat obtenu et quel est le résultat attendu ?

N'oublie pas de regarder la console de ton navigateur (F12) pour corriger les éventuelles erreurs js.

Un exemple avec le code html serait en effet plus pratique pour identifier ton problème.
Un test similaire à ton code :
Code:

1 2 3 4 5 6 7 8 <label><input type="radio" name="capteur" value="0" checked> Capteur 0</label> <label><input type="radio" name="capteur" value="1"> Capteur 1</label> <label><input type="radio" name="capteur" value="2"> Capteur 2</label> <hr> <span class="unit">%</span> <span class="unit">%</span>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 const radios = document.querySelectorAll('[name="capteur"]') const units = document.querySelectorAll(".unit") for (const radio of radios) { radio.addEventListener("change", () => { for (const unit of units) { if (radio.value == "0") { unit.textContent = "%" } else if (radio.value == "1") { unit.textContent = "°C" } else if (radio.value == "2") { unit.textContent = "F" } } }) }

Je suis en cours de développement de tout cela, donc, certaines fonctions ne sont pas encore faites, en particulier pour les boutons.
Mon HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Gestion domotique Mormic</title>
        <link rel="icon" href="data:,">
        <link href="styleEvent.css" rel="stylesheet" type="text/css">       
        <script src="codeEvent.js" async></script> 
    </head>
    <body>
        <h2>Evenements Capteurs</h2>
        <label>Validation</label>
        <button id="sRAM" class="bouton">RAM</button>
        <button id="sMEM" class="bouton">MEM</button>
        <button id="sMOD" class="bouton">MODIF</button>
        <button id="sFIN" class="bouton">FIN</button>
        <button id="sANU" class="bouton">ANNUL</button>
        <br><br>
        <fieldset id="ref_manip">
            <legend>Références</legend>
            <label for="man">N° de manip</label>
            <input required  type="number" id="man" name="manip" min="00" max="98" step="2"/>
            <label for="car">N° de Carte</label>
            <input required type="number" id="car" name="carte" min="1" max="9" />
            <br><br>
            <input type="radio" class="capteurs" id="tempe" name="capt" value="0"/>
            <label for="tempe">Température</label>
            <input type="radio" class="capteurs" id="humide" name="capt" value="1"/>
            <label for="humide">Humidité</label>
            <input type="radio" class="capteurs" id="presse" name="capt" value="2"/>
            <label for="presse">Pression</label>
            <input type="radio" class="capteurs" id="lume" name="capt" value="3"/>
            <label for="lume">Luminosité</label>
        </fieldset>
        <br><br><br>
        <fieldset class="'action" id="action_moins">
            <legend>Action si inférieur au seuil</legend>
            <div class="zone" id="zoneM1">            
                <input type="radio" class="commandesM" id="ouvM" name="commandeM" value="O"/>
                <label for="ouv">Ouvre_Volet</label>
                <input type="radio" class="commandesM" id="ferM" name="commandeM" value="F"/>
                <label for="fer">Ferme_Volet</label>
                <input type="radio" class="commandesM" id="basM" name="commandeM" value="B"/>
                <label for="base-">Relais_Base</label>
                <input type="radio" class="commandesM" id="disM" name="commandeM" value="D"/>
                <label for="dis">Relais_Distant</label>
            </div>
            <br>
            <div class="zone" id="zoneM2">
                <label for="equip-">Equipement</label>
                <input type="number" id="equipM" min="0" max="9"/>
                <input type="radio" class="mouvesM" id="RonM" name="RcommandeM" value="O"/>
                <label for="Ron-">On_Relais</label>
                <input type="radio" class="mouvesM" id="RofM" name="RcommandeM" value="F"/>
                <label for="Roff-">Of_Relais</label>
                <input type="radio" class="mouvesM" id="RdelM" name="RcommandeM" value="T"/>
                <label for="Rdel-">Relais_Tempo</label>
            </div>
            <br>
            <div class="zone" id="zoneM3">
                <label for="paramM">Paramètre</label>
                <input type="number" id="paramM" min="1" max="100"/>
                <span id="parunitM"> </span>
                <label for="valeM"  class="valeur">Valeur de seuil M</label>
                <input type="number" class="valeur" id="valeM" min="1" max="1050"/>
                <span class="unit" class="valeur"></span>
            </div>
        </fieldset>
        <br><br><br>
        <fieldset class="'action"  id="action_plus">
            <legend>Action si supérieur au seuil</legend>
            <div class="zone" id="zoneP1">
                <input type="radio" class="commandesP" id="ouvP" name="commandeP" value="O"/>
                <label for="ouvP">Ouvre_Volet</label>
                <input type="radio" class="commandesP" id="ferP" name="commandeP" value="F"/>
                <label for="ferP">Ferme_volet</label>
                <input type="radio" class="commandesP" id="basP" name="commandeP" value="B"/>
                <label for="basP">Relais_Base</label>
                <input type="radio" class="commandesP" id="disP" name="commandeP" value="D"/>
                <label for="disP">Relais_Distant</label>
            </div>
            <br>
            <div class="zone" id="zoneP2">
                <label for="equipP">Equipement</label>
                <input type="number" id="equipP" min="0" max="9"/>
                <input type="radio" class="mouvesP" id="RonP" name="Rcommande+" value="O"/>
                <label for="RonP">On_Relais</label>
                <input type="radio" class="mouvesP" id="RofP" name="Rcommande+" value="F"/>
                <label for="RoffP">Of_Relais</label>
                <input type="radio" class="mouvesP" id="RdelP" name="Rcommande+" value="T"/>
                <label for="RdelP">Relais_Tempo</label>
            </div>
            <br>
            <div class="zone" id="zoneP3">
                <label for="paramP">Paramètre</label>
                <input type="number" id="paramP" min="1" max="100"/>
                <span id="parunitP"> </span>
                <label for="valeP"  class="valeur">Valeur de seuil P</label>
                <input type="number" class="valeur" id="valeP" min="1" max="1050"/>
                <span class="unit" class="valeur"></span>
            </div>
        </fieldset>

Le CSS pas encore finalisé:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
html{
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
}
#man{
    width:3em;
}
#car{
    width:2em;
}
.valeur{
   position: relative;
   left: 60px;
}
#ref_manip legend{
    color: green;
}
#action_plus legend{
    color: blue;
}
#action_moins legend{
    color: red;
}
.bouton{
    margin-left: 30px;
}

mon code JS en cours:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
let capteur;
let listeRadioCapteurs = document.querySelectorAll(".capteurs");
listeRadioCapteurs.forEach(function(cap){
    cap.addEventListener("change",function(fcap){
        if(this.checked){       //si un radio capteur est sélectionné
            capteur=this.value;   
        }
        for(let x of document.querySelectorAll(".unit")){
            if(capteur=="0"){
                x.textContent="°C";
            }
            else if(capteur=="1"){
                x.textContent="%";
            }
            else if(capteur=="2"){
                x.textContent="hPa";
            }
            else if(capteur=="3"){
                x.textContent="Lx";
            }
        }
    })  
})         
let commandeM;
let listeRadioCommandesM = document.querySelectorAll(".commandesM");
listeRadioCommandesM.forEach(function(mCom){
    mCom.addEventListener("change",function(fcom){
        if(this.checked){
            commandeM=this.value;            
        }
        let x=document.querySelector("#zoneM2");
        let y=document.querySelector("#zoneP2");
        let f=document.querySelector("#ferP");
        let o=document.querySelector("#ouvP");
        let b=document.querySelector("#basP");
        let d=document.querySelector("#disP");
        let pP=document.querySelector("#paramP");
        let pM=document.querySelector("#paramM");
        if(commandeM=="O" || commandeM=="F"){
            x.style.visibility='hidden'; y.style.visibility='hidden';
            if(commandeM=="O"){
                f.checked='true';
                pM.value='';
                pP.value='100';
            }
            else if(commandeM=="F"){
                o.checked="true";
                pM.value='100';
                pP.value='';
             }
        }
        if(commandeM=="B" || commandeM=="D"){
            x.style.visibility='visible'; y.style.visibility='visible';
            pM.value='';
            pP.value='';
            if(commandeM=="B"){
                b.checked='true';
             }
            else if(commandeM=="D"){
                d.checked='true';
            }
        }
 
    })
})
let mouveM;
let listeRadioMouvesM = document.querySelectorAll(".mouvesM");
listeRadioMouvesM.forEach(function(mMouv){
    mMouv.addEventListener("change",function(fmouv){
        if(this.checked){
            mouveM=this.value;
        }
        if((mouveM=='O' || mouveM=='F') && document.querySelector(basM).checked=='true'){
            for(let x of document.querySelectorAll("#paramM ,#paramP")){
                x.style.visibility='hidden';
            }
       }
        if(mouveM=="O"){
        }
        else if(mouveM=="F"){
        }
        else if(mouveM=="T"){
        }
    })
})
let listeBouton = document.querySelectorAll(".bouton");     //tous les boutons de la page
listeBouton.forEach(function(k){
    k.addEventListener("click", function(f){
        touche = f.target.innerHTML;
        //debut de la saisie
        if(touche=="RAM"){
            lectureSaisie();
            prgServeur("/GestionPost");
            sauvegardeOk=true;
            //window.close();
        }
        else if(touche=="MEM"){
            lectureSaisie();
            prgServeur("/GestionPost");
            sauvegardeOk=true;
        }
        else if(touche=="FIN"){
            if(!sauvegardeOk) alert("La sauvegarde n'est pas faite");
            else alert("retour à la domotique Mormic");
            window.close();
        }
        else if(touche=="MODIF"){
            progNum=document.getElementById("prog_num").value;
            if(progNum<"0" || progNum>9) alert("Numéro du prog à modifier: 0 à 9");
            else{ 
                demandeProgramme('/API?Cmd=modif&prog=' + progNum.toString());
            }
        }
        else if(touche=="ANNUL"){
            window.close();
        }
    })  
l})
//**********************lecture de la saisie*********************************************
function lectureSaisie(){
    let manipNum=document.getElementById("man").value;
    let carteNum=document.getElementById("car").value;
 
}
//************************envoi de la saisie**********************************************
function prgServeur(url) {
    fetch(url, {
        method: 'POST',
        headers: {'Content-Type' : 'text/plain'},
        body: msg
     })
        .then(response => response.ok ? response.text() : Promise.reject("Reponse non valide"))
        .then(data => console.log("Reponse: ", data))
        .catch(error => alert("Erreur1: " , error))
 
}
//**********************demande d'envoi d'un programme**************************************
function demandeProgramme(url){
    fetch(url, {
        method: 'GET',
        headers: {'Content-Type' : 'text/plain'}
    })
        .then(response => response.ok ? response.text() : Promise.reject("reponse non valide"))
        .then(text => chargeProgramme(text))
        .catch(error => console.log.error)
}

Re-Bonjour.

ton code, du moins la partie qui nous intéresse ici fonctionne. Les 2 span de classe unit ont bien leur textContent égal à l'unité choise.
Par contre on ne voit rien car les span en question sont cachés sous l'élément qui les précède (un simple margin-left les fera réapparaitre).

La fonction lors du clic sur un bouton radio peut être bien simplifiée si tu mets comme valuesur chaque bouton directement celle que tu veux voir affectée au span. Plus besoin de condition
Code:

1 2 3 4 5 6 7 8 9 <input type="radio" class="capteurs" id="tempe" name="capt" value="0" > <label for="tempe">Température</label> <input type="radio" class="capteurs" id="humide" name="capt" value="1"> <label for="humide">Humidité</label <input type="radio" class="capteurs" id="presse" name="capt" value="2"> <label for="presse">Pression</label> <input type="radio" class="capteurs" id="lume" name="capt" value="3"> <label for="lume">Luminosité</label>
Code:

1 2 3 4 5 6 listeRadioCapteurs.forEach(function(cap){ cap.addEventListener("change",function(fcap){ for(let x of document.querySelectorAll(".unit")) x.textContent = this.value }) })

23/10/2024, 19h47
mormic

Super merci beaucoup.
Par contre n'y a-t'il pas un moyen élégant de positionner l'unité juste à droite de la zone de saisie sans passer par le margin-left?
Je viens de passer une heure à lire des quantités d'infos sans jamais avoir trouvé la solution.

On passe au CSS...

Tu as sur la même ligne trois éléments. Le troisième est caché par le deuxième car celui-ci est positionné en relative et qu'il est déplacé de 60px. C'est loin d'être une bonne idée.

Il suffit de donner de la marge à l'élément central pour obtenir quelque chose de correct
Code:

1 2 3 4 5 6 7 <label for="paramM">Paramètre</label> <input type="number" id="paramM" min="1" max="100"/> <span id="parunitM"> </span> <label for="valeM" class="espacelarge">Valeur de seuil M <input type="number" class="valeur" id="valeM" min="1" max="1050"> </label> <span class="unit" class="valeur">unit</span>
Code:

.espacelarge {margin: 2em}

Et tout est rétabli.
Cela dit, on est sur quelque chose qui n'est pas responsive. Pour une mise en page qui le soit, je te propose d'étudier plus tard la propriété CSS flex.

Merci Domi65 pour tes claires explications.
Cela fonctionne comme je l'espérais.
J'en ai profité pour retourner lire CSS FLEX: c'est assez génial. Je vais essayer de l'utiliser maintenant.
HTML:

Code:

1
2
3
4
5
6
7
8
9
10
<section id="zoneP3">
                <label for="paramP">Paramètre
                    <input type="number" class="param" id="paramP" min="1" max="100"/>
                </label>    
                <span id="parunitP"></span>
                <label for="valeP" class="position">Valeur de seuil P
                    <input type="number" class="param" id="valeP" min="1" max="1050"/>
                </label>
                <span class="unit">Unité</span>
            </section>

CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
section {
    display: inline-flex;
}
.position{
    margin-left: 6rem;
}
.param{
    margin-left: 10px;
}
.unit{
    margin-left: 4px;
}

JS:

Code:

1
2
3
4
5
6
7
8
let listeRadioCapteurs = document.querySelectorAll('[name=capt]');
listeRadioCapteurs.forEach(function(cap){
    cap.addEventListener("change",function(fcap){
        for(let x of document.querySelectorAll(".unit")){
            x.textContent = this.value;
        }
    })    
})

Je suis certain que j'ai encore beaucoup de chemin à faire pour arriver à l'excellence, mais grâce à l'aide apportée par ce forum je m'en rapproche.
Merci à tous.
Michel

24/10/2024, 12h02
domi65

Très bien. Bon apprentissage.