Discussion :

[defluc]

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 :

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

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

et la fonction :

Code :

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

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.

[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 :

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

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.

[defluc]

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 html :

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

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à.

[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 ?

[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.

[SpaceFrog]

peut etre avec un schema ou un dessin ???

[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 :

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

 <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 :

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

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.

[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 ...

[defluc]

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.

[SpaceFrog]

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
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 ?

[defluc]

Je teste à la fois sur IE9 et sur Firefox 13.0

[defluc]

Tout d'un coup, cela fonctionne.

Est-il possible que javascript se désactive après une erreur ?

[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.

[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

[defluc]

Merci à tous pour votre aide et votre patience.