IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Sélectionner plusieurs ID avec queryselector


Sujet :

JavaScript

  1. #1
    Membre habitué
    Homme Profil pro
    bricoleur
    Inscrit en
    Octobre 2014
    Messages
    393
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : bricoleur
    Secteur : Alimentation

    Informations forums :
    Inscription : Octobre 2014
    Messages : 393
    Points : 196
    Points
    196
    Par défaut Sélectionner plusieurs ID avec queryselector
    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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 174
    Points : 45 063
    Points
    45 063
    Par défaut
    Bonjour,
    Que fais-je mal dans le premier cas?
    tu ne lis pas la documentation pourtant claire

    Ressources :

  3. #3
    Membre habitué
    Homme Profil pro
    bricoleur
    Inscrit en
    Octobre 2014
    Messages
    393
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : bricoleur
    Secteur : Alimentation

    Informations forums :
    Inscription : Octobre 2014
    Messages : 393
    Points : 196
    Points
    196
    Par défaut
    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!

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 644
    Points : 66 671
    Points
    66 671
    Billets dans le blog
    1
    Par défaut
    querySelectorAll retourne une collection...
    textContent n'est pas une propriété d'une collection mais d'un element de la collection ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    439
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 439
    Points : 885
    Points
    885
    Par défaut
    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.

  6. #6
    Membre habitué
    Homme Profil pro
    bricoleur
    Inscrit en
    Octobre 2014
    Messages
    393
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : bricoleur
    Secteur : Alimentation

    Informations forums :
    Inscription : Octobre 2014
    Messages : 393
    Points : 196
    Points
    196
    Par défaut
    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.

  7. #7
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    439
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 439
    Points : 885
    Points
    885
    Par défaut
    « 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.

  8. #8
    Membre éclairé
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 383
    Points : 766
    Points
    766
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 javascript : 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
    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"
          }
     
        }
      })
    }

  9. #9
    Membre habitué
    Homme Profil pro
    bricoleur
    Inscrit en
    Octobre 2014
    Messages
    393
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : bricoleur
    Secteur : Alimentation

    Informations forums :
    Inscription : Octobre 2014
    Messages : 393
    Points : 196
    Points
    196
    Par défaut
    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 html : 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
    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 css : 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
    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 : 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
    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)
    }

  10. #10
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    439
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 439
    Points : 885
    Points
    885
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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
        })
    })

  11. #11
    Membre habitué
    Homme Profil pro
    bricoleur
    Inscrit en
    Octobre 2014
    Messages
    393
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : bricoleur
    Secteur : Alimentation

    Informations forums :
    Inscription : Octobre 2014
    Messages : 393
    Points : 196
    Points
    196
    Par défaut
    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.

  12. #12
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    439
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 439
    Points : 885
    Points
    885
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    .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.

  13. #13
    Membre habitué
    Homme Profil pro
    bricoleur
    Inscrit en
    Octobre 2014
    Messages
    393
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : bricoleur
    Secteur : Alimentation

    Informations forums :
    Inscription : Octobre 2014
    Messages : 393
    Points : 196
    Points
    196
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  14. #14
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    439
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 439
    Points : 885
    Points
    885
    Par défaut
    Très bien. Bon apprentissage.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. ouvrir plusieurs fenetre avec un lien
    Par demanghonj dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 21/10/2004, 11h35
  2. Query sur plusieurs colonnes avec count(distinct...)
    Par Jeankiki dans le forum Langage SQL
    Réponses: 2
    Dernier message: 18/08/2004, 16h22
  3. [ Struts ] plusieurs conditions avec equal?
    Par njac dans le forum Struts 1
    Réponses: 7
    Dernier message: 04/06/2004, 10h04
  4. Combiner plusieurs textures avec couches alpha
    Par TibobiT dans le forum OpenGL
    Réponses: 2
    Dernier message: 01/05/2004, 16h20
  5. Economie de mémoire pour plusieur images avec la même source
    Par neness dans le forum Composants VCL
    Réponses: 5
    Dernier message: 18/01/2004, 11h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo