10618 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je rencontre un problème qui me semble assez complexe (à résoudre mais également à expliquer).
Alors voilà, j'aimerai avoir 2 boutons: origines et sous-origines. Lorsque l'utilisateur clique sur le bouton origine, une liste de radio boutons apparait. J'aimerai que en fonction du radio bouton sélectionné par l'utilisateur dans les origines, lorsque celui-ci clique sur sous-origine d'autres radio boutons apparaissent. Cependant, ces radio boutons auront des valeurs différentes en fonction de quel radio bouton est sélectionné.

Pour l'instant j'ai fais ça, mais lorsque je passe d'un bouton à l'autre (d'origine à sous-origine et vis-versa) le radio bouton qui était sélectionné ne l'est plus. De plus je n'arrive pas à afficher différents contenus pour sous origines en fonction de quel radio bouton est sélectionné pour origines. Voici mon code:

<input type="button" name="origines" value="0rigines" id="origines" onclick="listeOrigines()"/>
    <input type="button" name="origines" value="Sous origines" id="sousOrigines" onclick="listeSousOrigines()"/>


<script>
        function listeOrigines(){
            document.getElementById('listeSousOrigines').style.display = 'none';
            document.getElementById('listeOrigines').innerHTML=
                '<input type="radio" name="origines" value="reception" id="reception"/> <label for="reception">Reception</label>\n' +
                '    <input type="radio" name="origines" value="chargement" id="chargement"/> <label for="chargement">Chargement</label><br />\n';
            document.getElementById('listeOrigines').style.display = 'block';
        }
        function listeSousOrigines(){
          document.getElementById('listeOrigines').style.display = 'none';
 
           if(origines.value==reception){
               document.getElementById('listeSousOrigines').innerText="reception est selectionné"
           }
           if(origines.value==chargement) {
               document.getElementById('listeSousOrigines').innerText="reception est selectionné"
           }
           else{
               document.getElementById('listeSousOrigines').innerText="rien n'est selectionné"
           }
            document.getElementById('listeSousOrigines').style.display = 'block';
        }
    </script>



    <p id="listeOrigines"></p>
    <p id="listeSousOrigines"></p>


Lorsque je selectionne un radio boutton, cela me met toujous: "rien n'est selectionné". Comment faire ?

Merci pour vos réponses !
Bonjour romane_pm,

Premier point :
origines.value renvoie un string donc chargement et reception doivent être de type string
soit par exemple : if(origines.value == "chargement") {}
Deuxieme point
origines dans la fonction listeSousOrigines ne correspond à rien elle doit être un RadioNodeList
le moyen le plus simple d'après moi de mettre les input dans un form
Troisième point
seul les inputs type radio on un name commun
tes bouton ne peuvent pas (mais c'est pas faux) avoir un name commun ils devraient s'appeller
plus comme cela bt_origines et bt_sousorigines
Quatrième point :
si ta liste de radio dans listeOrigines est toujours la même pourquoi la faire en js?

Exemple :
https://codepen.io/Zonecss/pen/xxxGavr
Meilleure solution