11348 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
J'aimerai faire en sorte que lorsque l'user sélection un bouton radio, cela affiche en dessous sois une liste déroulante soit une textarea.
ex:
Ajouter un commentaire
OUI NON
Si oui coché alors afficher en dessous une textarea.
j'ai essayé ce code , sans résultat.

<td>
            Ajouter un commentaire ?
            <br/>
            <input type="radio" name="commentnon" value="SANS COMMENTAIRE">
            <label>NON</label>
            &emsp;
            <input type="radio" name="commentoui" value="Oui">
            <label>OUI</label>
            <br/>
            <div id="new-comment-group" style="display: none;">
            <textarea name="new-comment" id="new-comment" require maxlength="17" tabindex="20"></textarea>
            </div>
        </td>
        
        <script>
 let OuiInput = document.querySelector('[name="commentoui"]');

// On va intercepter les événements "change" du bouton radio
// Cela correspond à un changement d'option sélectionnée
commentoui.addEventListener('change', function() {
  // On cache les assets par défaut
  document.querySelector('#new-comment-group').style.display = 'none';
  document.querySelector('#new-comment-group textarea').removeAttribute("required");
  
  // Si la valeur du select est OUI alors on affiche la textarea
  if(this.value === 'Oui') {
    document.querySelector('#new-comment-group').style.display = 'block';
    document.querySelector('#new-comment-group textarea').setAttribute("required","required");
    
  } 
});
</script>

Merci.
Modérateur
Bonjour,

Tu as défini la variable OuiInput au début de ton code, mais tu utilises ensuite la variable commentoui au lieu de OuiInput. C'est pour ça que ça marche po !

Ce genre d'erreur se détecte assez facilement en utilisant click-droit => inspecter => onglet console.

Amicalement,
Meilleure solution
Bonjour parsimonhi,
Effectivement j'ai encore fait une grosse boulette.
Maintenant je comprends mieux le code.
Merci de tout cœur pour tes explications.