Multi javascript

Bonjour,

Je souhaite faire un formulaire de contact dans lequel des options apparaissent si certaines cases sont cochées.
J'ai réussi à masquer une première option avec le javascript suivant:

<script type="text/javascript">
	function rendSelectSensible() {
   	 document.getElementById("trajet").onchange = afficheCacheInput;
   	 document.getElementById("date-retour").style.display = "none";
   	 document.getElementById("d-retour-label").style.display = "none";
   	 document.getElementById("h-retour-label").style.display = "none";
   	 document.getElementById("heure-retour").style.display = "none";
	}
	function afficheCacheInput() {
    	if ( document.getElementById("trajet").value == "Aller-retour" ) {
     	   document.getElementById("date-retour").style.display = "inline";
		document.getElementById("d-retour-label").style.display = "inline";
		document.getElementById("h-retour-label").style.display = "inline";
		document.getElementById("heure-retour").style.display = "inline";
   	 } else {
     	   document.getElementById("date-retour").style.display = "none";
		document.getElementById("d-retour-label").style.display = "none";
		document.getElementById("h-retour-label").style.display = "none";
		document.getElementById("heure-retour").style.display = "none";
  	  }
	}
	window.onload = rendSelectSensible;
</script>

Mais si je fais de même pour masquer ma deuxième option en ajoutant le même type de javascript à la suite, seule la seconde option sera masquée, la première ne l'est plus.

Voici mon code complet:

<script type="text/javascript">
	function rendSelectSensible() {
   	 document.getElementById("trajet").onchange = afficheCacheInput;
   	 document.getElementById("date-retour").style.display = "none";
   	 document.getElementById("d-retour-label").style.display = "none";
   	 document.getElementById("h-retour-label").style.display = "none";
   	 document.getElementById("heure-retour").style.display = "none";
	}
	function afficheCacheInput() {
    	if ( document.getElementById("trajet").value == "Aller-retour" ) {
     	   document.getElementById("date-retour").style.display = "inline";
		document.getElementById("d-retour-label").style.display = "inline";
		document.getElementById("h-retour-label").style.display = "inline";
		document.getElementById("heure-retour").style.display = "inline";
   	 } else {
     	   document.getElementById("date-retour").style.display = "none";
		document.getElementById("d-retour-label").style.display = "none";
		document.getElementById("h-retour-label").style.display = "none";
		document.getElementById("heure-retour").style.display = "none";
  	  }
	}
	window.onload = rendSelectSensible;
</script>

<script type="text/javascript">
	function rendSelectSensible() {
   	 document.getElementById("hotellerie").onchange = afficheCacheInput;
   	 document.getElementById("personnes").style.display = "none";
   	 document.getElementById("nombre-personnes").style.display = "none";

	}
	function afficheCacheInput() {
    	if ( document.getElementById("hotellerie").value == "on" ) {
     	   document.getElementById("personnes").style.display = "inline";
		document.getElementById("nombre-personnes").style.display = "inline";

   	 } else {
     	   document.getElementById("personnes").style.display = "none";
		document.getElementById("nombre-personnes").style.display = "none";

  	  }
	}
	window.onload = rendSelectSensible;
</script>

Comment faire pour que mes deux javscript soient pris en compte et non pas seulement le dernier?

Merci.

Tu définis deux fois les fonctions rendSelectSensible et afficheCacheInput. Donc la première définition est effacée par la seconde.
*Il faut que tu donnes simplement un nom différent la deuxième fois par exemple rendSelectSensible2 et afficheCacheInput2
*Dans rendSelectSensible2 tu appelleras afficheCacheInput2
*en plus de
window.onload = rendSelectSensible;
tu rajouteras :
window.onload = rendSelectSensible2;

Tu pourrais faire aussi comme ceci :

/**
 * On applique un display inline aux élements dont les identifiants sont contenus dans tabIdElementsLies si la valeur de obj vaut strSiCetteValeurOnAffiche sinon on leur applique un display à none.
 * 
 * @param obj boîte de sélection HTML
 * @param strSiCetteValeurOnAffiche chaîne de caractères
 * @param tabIdElementsLies tableau de chaînes de caractères
 */
function lierA(obj, strSiCetteValeurOnAffiche, tabIdElementsLies) {
    "use strict";
    var i, strValeurDisplay;
    if (obj.value === strSiCetteValeurOnAffiche) {
        strValeurDisplay = "inline";
    } else {
        strValeurDisplay = "none";
    }
    for (i = 0; i < tabIdElementsLies; i += 1) {
        document.getElementById(tabIdElementsLies).display = strValeurDisplay;
    }
}

window.onload =  function () {
    "use strict";
    document.getElementById("trajet").onchange = lierA(this, "Aller-retour", ["date-retour", "d-retour-label", "h-retour-label", "heure-retour"]);
    document.getElementById("hotellerie").onchange = lierA(this, "on", ["personnes", "nombre-personnes"]);
};

Merci pour ta réponse,
j'ai essayé de renommer les fonctions mais c'est toujours le dernier script qui est pris en compte.

J'ai peut-être fait une erreur, voilà ce que j'ai:

<script type="text/javascript">
	function rendSelectSensible() {
   	 document.getElementById("trajet").onchange = afficheCacheInput;
   	 document.getElementById("date-retour").style.display = "none";
   	 document.getElementById("d-retour-label").style.display = "none";
   	 document.getElementById("h-retour-label").style.display = "none";
   	 document.getElementById("heure-retour").style.display = "none";
	}
	function afficheCacheInput() {
    	if ( document.getElementById("trajet").value == "Aller-retour" ) {
     	   document.getElementById("date-retour").style.display = "inline";
		document.getElementById("d-retour-label").style.display = "inline";
		document.getElementById("h-retour-label").style.display = "inline";
		document.getElementById("heure-retour").style.display = "inline";
   	 } else {
     	   document.getElementById("date-retour").style.display = "none";
		document.getElementById("d-retour-label").style.display = "none";
		document.getElementById("h-retour-label").style.display = "none";
		document.getElementById("heure-retour").style.display = "none";
  	  }
	}
	window.onload = rendSelectSensible;
</script>



<script type="text/javascript">
	function rendSelectSensible2() {
   	 document.getElementById("hotellerie").onchange = afficheCacheInput2;
   	 document.getElementById("personnes").style.display = "none";
   	 document.getElementById("nombre-personnes").style.display = "none";
   	 document.getElementById("etoiles").style.display = "none";
   	 document.getElementById("nombre-etoiles").style.display = "none";

	}
	function afficheCacheInput2() {
    	if ( document.getElementById("hotellerie").value == "Oui" ) {
    		document.getElementById("personnes").style.display = "inline";
			document.getElementById("nombre-personnes").style.display = "inline";
			document.getElementById("etoiles").style.display = "inline";
			document.getElementById("nombre-etoiles").style.display = "inline";

   	 } else {
     		document.getElementById("personnes").style.display = "none";
			document.getElementById("nombre-personnes").style.display = "none";
			document.getElementById("etoiles").style.display = "none";
			document.getElementById("nombre-etoiles").style.display = "none";

  	  }
	}
	window.onload = rendSelectSensible2;
</script>

Pour la deuxième solution j'ai pas trop compris à quoi correspond obj, strSiCetteValeurOnAffiche, tabIdElementsLies.
...J'ai oublié de préciser que je n'y connait pas grand chose en javasript!!