[POO] erreur IE : valeur Null ou n'est pas un objet

**An0nyme** · 24/03/2009, 16h22

Salut,

Je ne comprend pas trop d'où vient mon erreur, sous Firefox ça fonctionne mais pas sous IE alors que justement c'est un script que j'ai fait pour apprendre à IE la pseudo-propriété CSS hover dans certains cas.
Le truc c'est que quand je survole une ligne (avec le curseur) ça change la style de toutes mes cellules à l'intérieur de la ligne.

Les lignes sont créées par php à partir d'un modèle et ça pose des problèmes pour des techniques simples (changer la classe de la ligne avec onMouseover="this.class='otherclass';" ou simplement la couleur de fond ne fonctionne pas, quelque soit la ligne survolée ça ne l'applique qu'à la première).

Voici ce que j'ai dans les balises head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type="text/javascript">
/* Script créé par An0nyme, <a href="http://****" target="_blank">http://****</a>, apprend la pseudo-propriété CSS "hover" à IE pour la liste des sous-forums. Vous pouvez librement utiliser ce script pour votre forum *****. */
// Définissez les paramètres de base, colorH est la couleur à afficher quand la souris passe par-dessus la ligne et colorN est la couleur d'affichage normal, nbreForums est le nombre de forums présents sur l'index (le nombre de lignes).
colorN = '#EFEFEF';
colorH = '#000000';
nbreForums = 5;
 
function getoutstyle() {
 for (n=0; n<(nbreForums*5); n++) {
   document.getElementsByName('td')[n].style.backgroundColor = colorN;
 }
}
function line() {
 for (z=0; z<document.getElementsByName('tr').length; z++) {
   document.getElementsByName('tr')[z].id = 'a'+z;
 }
}
function ogstyle(id) {
 // recopiez et incrémentez cette ligne autant de fois que vous avez de forums.
 if (id == "a0") { var ligne = 0; }
 if (id == "a1") { var ligne = 1; }
 if (id == "a2") { var ligne = 2; }
 if (id == "a3") { var ligne = 3; }
 if (id == "a4") { var ligne = 4; }
 if (id == "a5") { var ligne = 5; }
 for (i=(5*ligne); i<(5+5*ligne); i++) {
   document.getElementsByName('td')[i].style.backgroundColor = colorH;
 }
}
</script>

Et le HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  <!-- BEGIN forumrow -->
 <tr name="tr" onMouseover="line();id=this.id;ogstyle(id);" onMouseout="getoutstyle();">
	<td class="row1" align="center" valign="middle" height="50" name="td"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
	<td class="row1" width="100%" height="50" name="td"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a><br />
	  </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}<br />
	  </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" name="td" ><span class="gensmall">{catrow.forumrow.TOPICS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" name="td"><span class="gensmall">{catrow.forumrow.POSTS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap" name="td"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
 </tr>
 <!-- END forumrow -->

Fonctionne sous FF mais affiche sous IE : "valeur Null ou n'est pas un objet" pour "document.getElementsByName(...)[...].style".

Je me demandais ce qui n'allait pas, puis au passage je n'arrivais pas à incrémenter automatiquement mes lignes répétitives du genre : " if (id == "a0") { var ligne = 0; }".

J'avais essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
while (y<document.getElementsByName('tr').length) {
 if (id == 'a'+y) { var ligne = y; }
}

Mais sans succès, avez-vous une autre solution?

**jln13** · 24/03/2009, 18h09

salut,

ton probleme vient de ta fonction "line".
Le document.getElementsByName('tr').length te retourne toujours 0 sous internet explorer.

Apres recherche, il semble que getElementsByName ne fonctionne qu'avec les balises de formulaire (select, input..), d'ou ton probleme. Il faut utiliser les document.getElemetById pour les autres balises..

Je pense qu'il faudrait que tu repenses ta facon de faire parce que ton code est bien complique pour juste changer la couleur de fond d'une ligne d'un tableau... Genre definir deux css, une normale et une hover.. et hop le tour est joue.. sans javascript ! :o)

**E.Bzz** · 24/03/2009, 19h07

Bonjour,
c'est plutôt cette ligne qui pose problème

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByName('tr')[z].id = 'a'+z;

Changer les id à la volée

Tu as essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <tr onmouseover="this.className='classe_survol';" onmouseout="this.className='classe_normal';">

?

En créant bien sûr les 2 classes avec les bonnes couleurs ...

A+

**An0nyme** · 24/03/2009, 21h48

Le onMouseover ne fonctionne pas, ça déconne au niveau du php mais je ne peux pas toucher au php autrement j'aurais fait bien plus simple.

Le document.getElementsByName('tr').length te retourne toujours 0 sous internet explorer.

J'ai remplacé par une valeur fixe (d'ailleurs cette ligne ne sert à rien puisqu'elle correspond aussi à la valeur de ma variable nbreForums) et ça n'a rien changé.
Quant à définir deux css je serai quand même obliger d'utiliser du javascript pour changer le css appelé à moins que tu parlais d'utiliser la propriété hover qui justement ne fonctionne pas sous IE (à part pour les liens) d'où mon script.

Ben je pense que je suis reparti pour trouver un truc plus tordu, puisqu'en effet j'avais cru comprendre en cherchant sur le net que le problème pouvait venir de l'attribution d'une ID.

Pour le dernier problème c'est résolu, je ne sais pas pourquoi ça ne fonctionnait pas quand j'avais utilisé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 for (y=0; y<nbreForums; y++) {
   if (id == 'a'+y) { var ligne = y; }
 }

Mais maintenant c'est bon, j'avais dû faire une erreur stupide.

**An0nyme** · 24/03/2009, 22h04

Désolé du double post mais je préfère en faire un deuxième plutôt que d'éditer afin que ça reste clair.

Voilà où j'en suis rendu :

-mon HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  <!-- BEGIN forumrow -->
 <tr name="tr" onMouseover="line();id=this.name;ogstyle(id);" onMouseout="getoutstyle();">
	<td class="row1" align="center" valign="middle" height="50" name="td"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
	<td class="row1" width="100%" height="50" name="td"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a><br />
	  </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}<br />
	  </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" name="td" ><span class="gensmall">{catrow.forumrow.TOPICS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" name="td"><span class="gensmall">{catrow.forumrow.POSTS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap" name="td"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
 </tr>
 <!-- END forumrow -->

-Mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type="text/javascript">
/* Script créé par An0nyme, <a href="http://****" target="_blank">http://****</a>, apprend la pseudo-propriété CSS "hover" à IE pour la liste des sous-forums. Vous pouvez librement utiliser ce script pour votre forum *****. */
// Définissez les paramètres de base, colorH est la couleur à afficher quand la souris passe par-dessus la ligne et colorN est la couleur d'affichage normal, nbreForums est le nombre de forums présents sur l'index (le nombre de lignes).
colorN = '#EFEFEF';
colorH = '#000000';
nbreForums = 5;
 
function getoutstyle() {
 for (n=0; n<(nbreForums*5); n++) {
   document.getElementsByName('td')[n].style.backgroundColor = colorN;
 }
}
function line() {
 for (z=0; z<nbreForums; z++) {
   document.getElementsByName('tr')[z].name = 'tr'+z;
 }
}
function ogstyle(id) {
 for (y=0; y<nbreForums; y++) {
   if (id == 'tr'+y) { var ligne = y; }
 }
 for (i=(5*ligne); i<(5+5*ligne); i++) {
   document.getElementsByName('td')[i].style.backgroundColor = colorH;
 }
}
</script>

Toujours la même erreur, que dois-je en conclure? Que IE ne sait pas faire de getElementByName pour autre chose que les formulaires ou que IE ne sait pas détecter par javascript les modifications faites par javascript dans le HTML?

**RomainVALERI** · 25/03/2009, 08h55

Je ne comprends pas pourquoi tu utilises la propriété "name" pour accéder a tes éléments de tableau... elle n'est pas faite pour ça et elle pose toujours des tas de problèmes...

Pourquoi ne pas simplement utiliser getElementsByTagName :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var tab = document.getElementById(idDeTonTableau);
tab.getElementsByTagName('td')[n].style.backgroundColor = colorN;

?

**E.Bzz** · 25/03/2009, 09h15

Envoyé par RomainVALERI

Pourquoi ne pas simplement utiliser getElementsByTagName :

+1

Mais visiblement les solutions simples ne conviennent pas ou ne "fonctionnent pas"

A+

**An0nyme** · 25/03/2009, 12h39

Euh tout simplement parce que je n'avais jamais réussit à l'utiliser, je viens de refaire des tests et ça y est ça fonctionne (euh juste le document.getElementsByTagName).
Fallait le savoir que ça ne calcule que jusqu'au noeud où l'on appel la fonction (d'où le fait que ça n'est jamais fonctionné chez moi), mais c'est génial autrement (ouai je suis impressionné par le fait que ça ne compte que jusqu'où j'appelle la fonction), donc je vais voir ce que j'arrive à faire.

**RomainVALERI** · 25/03/2009, 12h57

Envoyé par An0nyme

Euh tout simplement parce que je n'avais jamais réussit à l'utiliser, je viens de refaire des tests et ça y est ça fonctionne (euh juste le document.getElementsByTagName).
Fallait le savoir que ça ne calcule que jusqu'au noeud où l'on appel la fonction (d'où le fait que ça n'est jamais fonctionné chez moi), mais c'est génial autrement (ouai je suis impressionné par le fait que ça ne compte que jusqu'où j'appelle la fonction), donc je vais voir ce que j'arrive à faire.

J'ai rien compris

mais je suis content que ca marche

( si en effet ca marche...

)

**An0nyme** · 25/03/2009, 15h04

Je disais que par exemple si je met :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<table>
...
</table>
<table>
...
</table>
<script type="text/javascript">
nbreTables = document.getElementsByTagName("TABLE").length;
</script>
<table>
...
</table>

ça me renvoi que j'ai 2 tableaux.

Si je met :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<table>
...
</table>
<script type="text/javascript">
nbreTables = document.getElementsByTagName("TABLE").length;
</script>
<table>
...
</table>
<table>
...
</table>

ça me renvoi que j'ai un seul tableau.

Donc évidemment quand je mettais entre les balises head ça me renvoyait toujours 0 comme valeur puisqu'il n'y avait pas l'élément avant...

Bon je suis toujours bloqué mais j'essaye une autre idée.

**E.Bzz** · 25/03/2009, 15h40

Envoyé par An0nyme

Bon je suis toujours bloqué mais j'essaye une autre idée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="alert(document.getElementsByTagName('table').length);">

?

Dans les autres cas, ta page n'est pas encore complètement chargée quand tu comptes les tables

A+

[POO] erreur IE : valeur Null ou n'est pas un objet

JavaScript

Discussions similaires

Partager

Partager