" 'Options' a la valeur NULL ou n'est pas un objet"

Sujet résolu

13 février 2011 à 22:23:26

Salut les zéros !

Alors voila je me suis prit la tête toute cette après midi sur un problème de formulaire dynamique.
En cherchant sur internet, j'ai pu voir que l'erreur sur IE " 'Options' a la valeur NULL ou n'est pas un objet" lui est spécifique, cependant même si il n'y a pas d'erreur JS, le résultat ne passe pas non plus sous FF.

Voila le code : le but est d'afficher le prix d'un modèle de voiture, une fois avoir choisit sa marque puis son modèle. Le prix s'affiche alors dans une <div> en bas :

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transistional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html ;charset=ISO-8859-1"
http-equiv="content-type" />
<script type="text/javascript" src="./js/mylib.js"></script>
 <script type="text/javascript">
 
 function changeFormulaire() {
 
 var sel = document.forms[0].formulaire;
 choix = sel.options[sel.selectedIndex].value;
 
 if (choix == "R") {
 document.getElementById("m1").innerHTML = "Twingo";
 document.getElementById("m2").innerHTML = "Clio";
 document.getElementById("m3").innerHTML = "Mégane";
 document.getElementById("m4").innerHTML = "Laguna";
 document.getElementById("m1").value = "RT";
 document.getElementById("m2").value = "RC";
 document.getElementById("m3").value = "RM";
 document.getElementById("m4").value = "RL";
	}
 if (choix == "P") {
 document.getElementById("m1").innerHTML = "107";
 document.getElementById("m2").innerHTML = "207";
 document.getElementById("m3").innerHTML = "308";
 document.getElementById("m4").innerHTML = "407";
 document.getElementById("m1").value = "P1";
 document.getElementById("m2").value = "P2";
 document.getElementById("m3").value = "P3";
 document.getElementById("m4").value = "P4";
	}
 if (choix == "W") {
 document.getElementById("m1").innerHTML = "Fox";
 document.getElementById("m2").innerHTML = "Polo";
 document.getElementById("m3").innerHTML = "Golf";
 document.getElementById("m4").innerHTML = "Passat";
 document.getElementById("m1").value = "WF";
 document.getElementById("m2").value = "WPo";
 document.getElementById("m3").value = "WG";
 document.getElementById("m4").value = "WPa";
	}

 }
 
 function releverPrix() {
 
 var sel = document.forms[0].formulaire2;
 choix = sel.options[sel.selectedIndex].value;
 

 
 switch(choix){
	case "RT" : document.getElementById("prix").innerHTML = "9990€"; break;
	case "RC" : document.getElementById("prix").innerHTML = "12990€"; break;
	case "RM" : document.getElementById("prix").innerHTML = "16990€"; break;
	case "RL" : document.getElementById("prix").innerHTML = "19990€"; break;
	
	case "P1" : document.getElementById("prix").innerHTML = "10990€"; break;
	case "P2" : document.getElementById("prix").innerHTML = "13990€"; break;
	case "P3" : document.getElementById("prix").innerHTML = "17990€"; break;
	case "P4" : document.getElementById("prix").innerHTML = "20990€"; break;
	
	case "WF" : document.getElementById("prix").innerHTML = "11450€"; break;
	case "WPo" : document.getElementById("prix").innerHTML = "14490€"; break;
	case "WG" : document.getElementById("prix").innerHTML = "18490€"; break;
	case "WPa" : document.getElementById("prix").innerHTML = "21990€"; break;
 }
 
 
 
 
 }
 </script>


</head>
<body> 

 <form action="">
  <select name="formulaire" onChange="changeFormulaire()" id="selec">
  <option disabled="disabled">Choisissez une marque</option>
  <option value="R">Renault</option>
  <option value="P">Peugeot</option>
  <option value="W">Wolkswagen</option>
  </select>
</form>
<br/>
<form action="">
  <select name="formulaire2" onChange="releverPrix()" id="selec2">
  <option disabled="disabled">Choisissez un modèle</option>
  <option value = "" id="m1"></option>
  <option value = "" id="m2"></option>
  <option value = "" id="m3"></option>
  <option value = "" id="m4"></option>
  </select>
</form>

<br/>
Le prix de la voiture est : <div id="prix"> </div>

</body>
</html>

Peut-être que le placer dans un <div> n'est pas très judicieux, ne tout cas je n'ai pas trouvé mieux pour le moment :-°

Alors, voila LA question : comment je pourrais corriger ce code pour que mon prix s'affiche?

Merci d'avoir prit le temps et bonne soirée !

Golmote

14 février 2011 à 0:02:49

Pourquoi as-tu deux <form> ?

hamdrim

14 février 2011 à 0:31:25

Ah merci, je maitrise pas encore très bien je voyais mal ce que le <form> fesait, je l'ai donc étendu jusqu'à la fin

Sinon j'ai finit par trouver un moyen d'éviter l'erreur, si certains ont le même problème je me suis simplifié la vie en mettant un paramètre à mes fonctions et en les appellant en onChange="releverPrix(this.value);".

Merci

Eric2A

14 février 2011 à 0:40:22

Salut,

Tu peux simplifier en plus

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transistional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<script type="text/javascript" src="./js/mylib.js"></script>
	<script type="text/javascript">
	function changeFormulaire(){
		var sel=document.getElementById('selec');
		var choix=sel.value;
		if(choix=='R'){
			document.getElementById("m1").innerHTML = "Twingo";
			document.getElementById("m2").innerHTML = "Clio";
			document.getElementById("m3").innerHTML = "Mégane";
			document.getElementById("m4").innerHTML = "Laguna";
			document.getElementById("m1").value = "RT";
			document.getElementById("m2").value = "RC";
			document.getElementById("m3").value = "RM";
			document.getElementById("m4").value = "RL";
		}
		else if(choix=='P'){
			document.getElementById("m1").innerHTML = "107";
			document.getElementById("m2").innerHTML = "207";
			document.getElementById("m3").innerHTML = "308";
			document.getElementById("m4").innerHTML = "407";
			document.getElementById("m1").value = "P1";
			document.getElementById("m2").value = "P2";
			document.getElementById("m3").value = "P3";
			document.getElementById("m4").value = "P4";
		}
		else if(choix=='W'){
			document.getElementById("m1").innerHTML = "Fox";
			document.getElementById("m2").innerHTML = "Polo";
			document.getElementById("m3").innerHTML = "Golf";
			document.getElementById("m4").innerHTML = "Passat";
			document.getElementById("m1").value = "WF";
			document.getElementById("m2").value = "WPo";
			document.getElementById("m3").value = "WG";
			document.getElementById("m4").value = "WPa";
		}
		releverPrix();
	}

	function releverPrix(){
		var sel=document.getElementById('selec2');
		var choix=sel.value;
		var prix=0;
		switch(choix){
			case "RT":prix="9990"; break;
			case "RC":prix="12990"; break;
			case "RM":prix="16990"; break;
			case "RL":prix="19990"; break;

			case "P1":prix="10990"; break;
			case "P2":prix="13990"; break;
			case "P3":prix="17990"; break;
			case "P4":prix="20990"; break;

			case "WF":prix="11450"; break;
			case "WPo":prix="14490"; break;
			case "WG":prix="18490"; break;
			case "WPa":prix="21990"; break;
		}
		if(prix!='')document.getElementById('prix').innerHTML=prix+'€';
	}

	window.onload=function(){
		document.getElementById('selec').onchange=function(){changeFormulaire();return false;}
		document.getElementById('selec2').onchange=function(){releverPrix();return false;}
		changeFormulaire();
	}
	</script>
</head>
<body>
	<form action="">
		<p>
			<select name="formulaire" id="selec">
				<option disabled="disabled">Choisissez une marque</option>
				<option value="R">Renault</option>
				<option value="P">Peugeot</option>
				<option value="W">Wolkswagen</option>
			</select>
		</p>
	</form>

	<form action="">
		<p>
			<select name="formulaire2" id="selec2">
				<option disabled="disabled">Choisissez un modèle</option>
				<option value="" id="m1"></option>
				<option value="" id="m2"></option>
				<option value="" id="m3"></option>
				<option value="" id="m4"></option>
			</select>
		</p>
	</form>

	<p>Le prix de la voiture est : <span id="prix"> </span></p>
</body>
</html>