getElementById ne renvoie rien

Version imprimable

29/09/2012, 10h43
defluc

getElementById ne renvoie rien
Bonjour,

J'en suis à mes tout début en js.
Dans un élément de liste, j'ai un évènement onclick qui appelle une fonction censée me renvoyer l'élément cliqué.

Je teste la fonction avec des instructions "alert" et rien ne m'est renvoyé par "getElementById".
Par contre, "getAttribute" renvoie bien l'id.

Voici le code de l'élément de liste :

Code:

<li><a id="sa" onclick="liClic(this)">sud américaine</a></li>

et la fonction :
Code:

1 2 3 4 5 function liClic( id, cell ) { alert( id.getElementById('id').innerHTML ); // ne fonctionne pas // alert(id.getAttribute('id') ); // fonctionne }
En question complémentaire, je voudrais savoir comment récupérer la valeur renvoyée par la fonction pour l'affecter à une variable globale.

Merci d'avance pour tout éclaircissement.
29/09/2012, 10h47
SpaceFrog
tu passes un seul paramètre qui est this lors de l'appel de la fonction ...
Tu passes donc la référence à l'objet
Code:

1 2 3 4 5 6 function liClic( obj ) { alert( obj.innerHTML ); alert(obj.id) }
les propriétés de l'objet passé deviennent donc accessible dans la fonction au travers de la référence à l'objet obj.

Un tout grand merci pour ce coup de pouce. Le deuxième paramètre est l'id d'une cellule de tableau dans laquelle je compte placer la valeur récupérée, par une instruction du genre
document.getElementById(Cell).innerHTML = id.innerHTML où cell est l'id d'une cellule définie comme dans le code ci-après :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table style="text-align: left; height: 30px;" id="OptionTableau" border="1" cellpadding="2" cellspacing="2" width="1195">
  <tbody>
    <tr>
      <td style="vertical-align: top;" id="MusClasCell" align="center" width="163"></td>
      <td style="vertical-align: top;" id="MusExoCell" align="center" width="145"></td>
      <td style="vertical-align: top;" id="CinemaCell" align="center" width="67"></td>
      <td style="vertical-align: top;" id="ChansonCell" align="center" width="98"></td>
      <td style="vertical-align: top;" id="DanseCell" align="center" width="83"></td>
      <td style="vertical-align: top;" id="InstrumCell" align="center" width="112">Cellule 5</td>
      <td style="vertical-align: top;" id="HitsCell" align="center" width="62"></td>
      <td style="vertical-align: top;" id="StyleCell" align="center" width="63"></td>
      <td style="vertical-align: top;" id="GrandsNomsCell" align="center" width="116"></td>
    </tr>
  </tbody>
</table>

Mais je n'en suis pas encore là.

29/09/2012, 14h41
SpaceFrog

heu ...

je ne vois pas pourquoi tu aurais besoin de l'id du parent ... vu que tu accèdes directement à un element par son id ...

De plus je n'ai rien compris à ton besoin ...
Tu n'aurais pas un exemple ?
29/09/2012, 17h09
defluc

D'une part, j'ai une liste formant un menu horizontal de 9 items avec des sous-menus et des sous-sous menu. Tous les éléments des menus et des sous-menus sont identifiés par un id.
D'autre part, sous ce menu, j'ai un tableau d'une ligne et de 9 cellules dont chacune a reçu un id.

Je voudrais qu'au clic sur un élément du menu ou d'un sous-menu, le texte de cet élément soit copié dans dans la cellule du tableau située sous l'élément du menu ou du sous-menu.

Ma fonction liClic(id, cell) a pour but d'assurer cette tâche en recevant l'id de l'élément de la liste (id) et l'id de la cellule (cell) à laquelle la valeur de la liste doit être copiée.
29/09/2012, 18h27
SpaceFrog

peut etre avec un schema ou un dessin ???
30/09/2012, 10h35
defluc
Mon problème ne relève pas du "design" mais de la programmation.

Avec l'évènement onclick sur l'élément du menu

Code:

<li><a id="sa" onclick="liClic(this, 'DanseCell')">sud américaine</a></li>

l'instruction de la fonction qui doit affecter le contenu de la cellule ne fonctionne pas.
Code:

1 2 3 4 function liClic(id, cell) { document.getElementById(cell).innerHTML = id.innerHTML; }
Pourtant les "alert" me renvoient les bonnes valeurs de id et de cell.
30/09/2012, 11h21
SpaceFrog

ton problème relève de la capacité a nous expliquer ton problème ...

Des explications du genre "quand je clique ici je voudrais que ça fasse ça là" ...
Je te demandais un dessin ou un schéma afin de pouvoir visualiser ta demande que je n'ai toujours pas comprise ...

et au passage les cellules sont vides ...
30/09/2012, 12h11
defluc

1 pièce(s) jointe(s)

Voici en pièce jointe, une capture d'écran qui fait apparaitre la barre des menus et en dessous, la ligne de tableau avec les cellules devant recevoir l'élément de liste cliqué dans le menu ou le sous-menu.

A propos, les boutons "insérer une image" et "Ajouter la balise code" ne fonctionnent pas.

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript">
function liClic(obj, cible)  {
document.getElementById(cible).innerHTML=obj.innerHTML
}
</script>
<title>Nouvelle page 1</title>
</head>
<body>
<table style="text-align: left; height: 30px;" id="OptionTableau" border="1" cellpadding="2" cellspacing="2" width="1195">
  <tbody>
    <tr>
      <td style="vertical-align: top;" id="MusClasCell" align="center" width="163"></td>
      <td style="vertical-align: top;" id="MusExoCell" align="center" width="145"></td>
      <td style="vertical-align: top;" id="CinemaCell" align="center" width="67"></td>
      <td style="vertical-align: top;" id="ChansonCell" align="center" width="98"></td>
      <td style="vertical-align: top;" id="DanseCell" align="center" width="83"></td>
      <td style="vertical-align: top;" id="InstrumCell" align="center" width="112"></td>
      <td style="vertical-align: top;" id="HitsCell" align="center" width="62"></td>
      <td style="vertical-align: top;" id="StyleCell" align="center" width="63"></td>
      <td style="vertical-align: top;" id="GrandsNomsCell" align="center" width="116"></td>
    </tr>
  </tbody>
</table>
<ul>
 <li><a id="sa" onclick="liClic(this, 'DanseCell')">sud américaine</a></li>
</ul>
</body>
</html>

tu es sur que javascript est activé sur ton browser , parce que les boutons de l'editeur fonctionnent très bien ...
Tu utilises quel navigateur et quelle version ?

30/09/2012, 15h17
defluc

Je teste à la fois sur IE9 et sur Firefox 13.0
30/09/2012, 15h31
defluc

Tout d'un coup, cela fonctionne.

Est-il possible que javascript se désactive après une erreur ?
30/09/2012, 15h36
SpaceFrog

Non il est plus vraisemblable que se cela soit dû au cache de ton navigateur qui conservait une ancienne version du fichier en mémoire, ou a un erreur de sauvegarde.
30/09/2012, 15h56
Walkn

S'il s'agit d'un problème de cache du navigateur, pense à faire un crtl + F5 ou crtl + shift + r afin de vider le cache de celui-ci ;) on a souvent des surprises à cause du cache.

Pour firefox, tu as une extension qui s'appelle "Hard Refresh" sur le click droit de la souris très pratique aussi:ccool:
30/09/2012, 17h04
defluc

Merci à tous pour votre aide et votre patience.