Bonjour à tous !

Ma question me semble triviale, mais je ne vois pourtant pas où ça cloche...
L'idée est que lorsqu'on appuie sur un bouton, ça affiche 8 blocs. Par défaut, dans le CSS, ces blocs ont comme propriété "visibility : none;"

Voici le code HTML :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
	<p><a href="javascript:minifenetres(8)">Cliquez ici pour encadrer les mini-fenêtres</a>.
	<div id="image_accueil">
		<div id="mf1" class="encadrement_minifenetre"></div>
		<div id="mf2" class="encadrement_minifenetre"></div>
		<div id="mf3" class="encadrement_minifenetre"></div>
		<div id="mf4" class="encadrement_minifenetre"></div>
		<div id="mf5" class="encadrement_minifenetre"></div>
		<div id="mf6" class="encadrement_minifenetre"></div>
		<div id="mf7" class="encadrement_minifenetre"></div>
		<div id="mf8" class="encadrement_minifenetre"></div>
        </div>
Et le Javascript :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
// Affiche ou masque les mini-fenêtres
function minifenetres (nb) {
	// Pour les 8 blocs	
	for(i=0; i<=nb; i++) {
		var obj=document.getElementById("mf"+i).style;
		if(obj.visibility=='visible') {
			obj.visibility='hidden';
		} else {
			obj.visibility='visible';
		}
	}
}
Firefox me renvoie :

Erreur*: document.getElementById("mf" + i) is null
Fichier Source*: file:///C:/moncheminquejai/scripts.js
Ligne*: 20
La ligne 20 c'est : var obj=document.getElementById("mf"+i).style;

Pour information, le code suivant fonctionne parfaitement :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
		i=4;
		obj=document.getElementById("mf"+i).style;
		if(obj.visibility=='visible') {
			obj.visibility='hidden';
		} else {
			obj.visibility='visible';
		}
(exemple pour un seul bloc).

Merci par avance aux âmes charitables qui sauront m'aider