Afficher la valeur d'une balise de type radio dans un formulaire

big mike
Les bases HTML/CSS
Javascript

Hello tout le monde, voilà mon petit soucis; afin de rendre joli mon formulaire, j'ai décidé de jongler avec les balises label pour customiser mon questionnaire qui utilise les balises radio, je souhaite à présent qu'a chaque fois que l'utilisateur clique sur le label, dans la balise span s'affiche la valeur du bouton radio, et j'avoue que j'ai un peu de mal avec le js. merci pour votre aide.

<div class="select-menu">
                                <div class="select">
                                    <span>Votre choix</span>//voilà c'est ici que je souhaiterais que la                                         //valeur de mon input type radio s'affiche
                                    <i class="fas fa-angle-down"></i>
                                </div>

                                <div class="options-list">
                                <input class="option" type="radio" id="p1" name="secteur" value="1">
                                <input class="option" type="radio" id="p2" name="secteur" value="2">
                                <input class="option" type="radio" id="p3" name="secteur" value="3">

                                <label for="p1" class="option-1">
                                    <div class="dot"></div>
                                    <div class="text">P 1</div>
                                </label>

                                <label for="p2" class="option-2">
                                    <div class="dot"></div>
                                    <div class="text">P 2</div>
                                </label>

                                <label for="p3" class="option-3">
                                    <div class="dot"></div>
                                    <div class="text">P 3</div>
                                </label>

                                <label for="p4" class="option-4">
                                    <div class="dot"></div>
                                    <div class="text">P 4</div>
                                </label>

                                </label>

                                </div>

                            </div>

2 réponses

big mike
Auteur

voici mon js

const select=document.querySelector(".select");
const options_list=document.querySelector(".options-list");
const options=document.querySelectorAll(".option");

});

options.forEach((option)=>{
  option.addEventListener("click",()=>{
    options.forEach((option)=>{option.classList.remove('selected')});
    select.querySelector("span").innerHTML=option.value.innerHTML;
    option.classList.add("selected");
    options_list.classList.toggle("active");
  })
})
StreetPlayer

Bonjour,

Tu fais .innerHTML sur option.value, mais value est juste une chaîne de caractères, pas un élément HTML, donc ça renvoie undefined.

Pour mieux comprendre :