Choix dans une liste déroulante qui affiche la div correspondante

Version imprimable

Bonjour,

Je pense que ce n'ai pas grand chose mais le code suivant ne fonctionne pas et je ne sais pas pourquoi, s'il vous plait pouvez vous m'aider.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html><head>
     <script type="text/javascript">
 
     function modification(objet)
     {   
     I = objet.selectedIndex ;
     choix = objet.options[I].value ;   
     array = document.getElementsByClass("point") ;
 
     for ( I=0; I<objet.options.length; I++)
          {
          if ( objet.options[I].value == choix )
               array[I].style.display = "block";
          else
               array[I].style.display = "none";
          }  
     }
 
     </script>
</head><body>
     <label style="font: 16px verdana;">OPTION : </label>
	 <select onchange="modification(this)">
 
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
 
     </select>
 
	<div></div>
	<div></div> 
     <div class="point" style="display: none;"><h1 style="color: red;">Je suis la div n° 1</h1></div>											
     <div class="point" style="display: none;"><h1 style="color: blue;">Je suis la div n° 2</h1></div>
     <div class="point" style="display: none;"><h1 style="color: green;">Je suis la div n° 3</h1></div> 
     <div class="point" style="display: none;"><h1 style="color: green;">Je suis la div n° 4</h1></div>
	 <div class="point" style="display: none;"><h1 style="color: green;">Je suis la div n° 5</h1></div>
 
 
</body></html>

10/11/2014, 17h42
NoSmoking

Bonjour,
et tu l'a récupéré où cette méthode?

Code:

array = document.getElementsByClass("point") ;

ne s'agirait-il pas plutôt de

Code:

array = document.getElementsByClassName("point");

J'en profites pour t'inciter à lire Pourquoi faut-il toujours déclarer ses variables ?
10/11/2014, 19h48
Mr Quinou

Heum je ne vais pas balancer mais c'est sur un site qui commence par openclass... et c'est une personne qui m'as aidé sur ce site...

Un grand merci à toi vénérable NoSmoking évidement que ta solution fonctionne sa à même du te faire sourire :?

En tout cas merci encore sa me rend vraiment service

Globalement tu pourrais avoir un code encore un peu plus actuel

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function modification(objet) {
  var choix = objet.value,                          // accès direct à la valeur du SELECT
      array = document.querySelectorAll('.point');  // récup. des éléments ayant une classe 'point'
 
  for (var i = 0, nb = objet.options.length; i <nb; i++) {
    if (objet.options[i].value == choix){
      array[i].style.display = "block";
    }
    else{
      array[i].style.display = "none";
    }
  }
}

encore simplifiable mais bon....