Discussion :

[mormic]

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 html :

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

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

Code html :

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

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 :

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

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 :

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

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

[NoSmoking]

Bonjour,

Que fais-je mal dans le premier cas?

tu ne lis pas la documentation pourtant claire

Ressources :

• Document.querySelector
• Document.querySelectorAll()

[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 :

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

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

Et maintenant plus rien ne s'affiche.
Surement encore quelquechose de pas lu!

[SpaceFrog]

querySelectorAll retourne une collection...
textContent n'est pas une propriété d'une collection mais d'un element de la collection ...

[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 jacascript :

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

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.

[mormic]

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 :

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

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.