JSFiddle - React, Tailwind, and code Playground

by Christophe Lablancherie

HTML

<body>
  <div id="conteneur">
    <div id="champ1">
      <label for="contrat">Choix du truc de fou *:</label>
      <select id="contrat" name="contrat">
        <option value="default" selected="selected">Choisissez votre valeur</option>
        <option value="peniche">PĂ©niche</option>
        <option value="maison">Maison</option>
      </select>
    </div>
    <div id="champ2">
    </div>
  </div>
</body>

JavaScript

document.getElementById('contrat').onchange = function(){
  if (this.value == 'peniche') {
    document.getElementById('champ2').innerHTML = "";
	var new_input    =  document.createElement('input');  
	new_input.type   =  "text";
    new_input.id_1     =  'id_input';
	document.getElementById('champ2').appendChild(new_input);
  }
    
  if (this.value == 'maison') {
    document.getElementById('champ2').innerHTML = "";
	var new_input    =  document.createElement('input');  
	new_input.type   =  "text";
    new_input.id     =  'id_input';
	document.getElementById('champ2').appendChild(new_input);
  }
};