Discussion :

[mormic]

Bonjour à tous
Je souhaite rendre visible un INPUT et son LABEL
je n'arrive pas à combiner les sélecteurs en une seule ligne:
HTML

Code html :

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

1
2
3
4
                <label for="paramM" class="labParam">Paramètre
                    <input type="number" class="param" id="paramM" min="1" max="100"/>
                    <span class="parunit">X</span>
                </label>

JS:

Code :

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

1
2
       document.querySelector(".labParam").style.visibility='visible';
        document.querySelector("#paramM").style.visibility='visible';

Avec ces deux lignes cela fonctionne mais en une seule ligne, est-ce possible?

[Toufik83]

Bonjour,

Utilisez querySelectorAll et une boucle

Code :

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

1
2
document.querySelectorAll(".labParam,#paramM")
.forEach(elem=>elem.style.visibility="visible");

[mormic]

Non cela ne va pas parce que .labParam fait référence à d'autres éléments qui ne doivent pas être rendus visible.
Il ne doit y avoir que cette entité label .labParam et input #paramM
Merci.

[Toufik83]

Bonjour,

Utilisez donc l'attribut for de .labParam puisqu'il fait référence à un ID unique.

Code :

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

document.querySelectorAll(".labParam[for='paramM'],#paramM")

Vous pouvez aussi attribuer un ID au label en question...

[mormic]

voilà, c'est cette syntaxe que je n'arrivais pas à faire car c'est difficile à trouver sur le Net, l'histoire des crochets [].
Merci beaucoup.

[domi65]

l'histoire des crochets [].

Cette "histoire" s'appelle les sélecteurs CSS. ;-)