Bonjour,
Je rencontre un souci avec une fonction en JS.
Le contexte : Je souhaite à l'aide d'un menu déroulant, choisir quelles colonnes d'un tableau j'affiche ou non.
J'utilise donc pour cela 3 fonctions :
- Une pour récupérer la valeur de mon menu déroulant
- Une pour afficher la colonne ou les colonnes si elles ne sont pas visible
- une pour cacher les colonnes qui étaient visibles mais qui ne doivent plus l'être.
Je suis obligé d'utiliser les Class car il y a plusieurs colonnes ( ici 'td') à afficher ou masquer à chaque fois.
L'erreur : Sous FF, pas de problème ça marche nickel. Par contre le problème vient d'IE ( testé sur les versions 6 et 8). Où la sélection du menu déroulant ne change rien et me donne comme erreur : 'length'a une valeur null ou n'est pas un objet.
Ma Question : d'où vient cette erreur, et pourquoi le calcul du length ne se fait pas de la même manière sous IE et sous FF ?
Merci de votre précieuse aide, car j'ai beau chercher, je ne trouve pas de bonnes solutions. Pour info, je ne maitrise le javascript que très peu.
Ci-dessous les codes de mes fonctions JS + mes tableaux HTML de tests.
Code Javascript :
function toggle_aff(className)
{
var elements = document.getElementsByClassName(className);
var l = elements.length;
for (var i = 0; i < l; i++)
{
if (elements[i].style.display == 'block')
elements[i].style.display = 'none';
else
elements[i].style.display = 'block';
}
}
function toggle_cach(className)
{
var elements = document.getElementsByClassName(className);
var l = elements.length;
for (var i = 0; i < l; i++)
{
elements[i].style.display = 'none';
}
}
function affiche(value)
{
if(value=='indiv')
{
toggle_aff("test1");
toggle_cach("test2");
toggle_cach("test3");
}
else if(value=='pro')
{
toggle_aff("test2");
toggle_cach("test1");
toggle_cach("test3");
}
else if(value=='test')
{
toggle_aff("test3");
toggle_cach("test2");
toggle_cach("test1");
}
}et l'HTML :
Code HTML :
<select onchange="affiche(this.value);">
<option value="indiv">individual </option>
<option value="pro"> professional </option>
<option value="test"> test </option>
</select>
<table >
<tr >
<td class="test1" style="display:block;">Test 1</td>
<td class="test2" style="display:none;" >Test 2</td>
<td class="test3" style="display:none;" >Test 3</td>
<td class="test3" style="display:none;" >Test 3.2</td>
</tr>
</table>