Ajouter des champs text en fonction d'un select

Hello,

Je suis une quiche en Javascript...

Mon script ressemble à ceci, mais dans ma console j'obtiens un message "Uncaught TypeError: Cannot read property 'undefined' of undefined"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
var select = document.getElementsByName("lieux");
var options = document.getElementsByTagName("option");
var optionValue = select.options[select.selectedIndex].value;
 
select.addEventListener('change', function()
{
   optionValue = select.options[select.selectedIndex].value;
   if (optionValue == 'Hors les murs')
   {
        // Afficher <input type="text" name="autreLieu"> (je n'ai pas encore regardé plus en détails comment afficher le champ, mais je suppose que c'est avec un .show)
   }
   elseif (optionValue != 'Hors les murs')
   {
        // cacher <input type="text" name="autreLieu"> (et ici un .hide)
   }
})
</script>

Mon HTML ressemble à ça

Code:

1
2
3
4
5
6
7
8
9
10
<select name="lieux">
        <?php
        $reqLieux = $bdd->prepare('SELECT * FROM lieux');
        $reqLieux->execute();
 
        while ($donnees = $reqLieux->fetch()) {
          echo '<option value="'.$donnees['libelle_lieux'].'">' . $donnees['libelle_lieux'] . '</option>';
        }
        ?>
      </select>

C'est une partie php, mais dans ce cas on s'en fout un peu, c'est comme si c'était :

Code:

1
2
3
4
<option value="lieu1">lieu1</option>
<option value="lieu2">lieu2</option>
<option value="lieu3">lieu3</option>
<option value="Autre">Autre</option>

Mon but est qu'en choisissant "Autre", un champ de type text s'affiche pour me permettre de préciser un lieu dedans...

Merci pour votre aide !