[Js] Appel div avec nom variable concaténé?

Résolu/Fermé

lomic2 Messages postés 14 Date d'inscription lundi 22 janvier 2007 Statut Membre Dernière intervention 21 septembre 2012 - 27 nov. 2008 à 19:44
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 27 nov. 2008 à 23:33

Bonjour,

Un petit souci, je bute dessus sans trouver, peut-être des yeux extérieurs y verront plus clair...

Je vous expose le problème:

Une carte, des points sur cette carte, au survol des points, un div contenant des informations pop en haut de page, jusque là rien d'extraordinaire.

Là où ça se complique c'est lorsque je veux afficher des infos distinctes sur chaque point, ma méthode:

Côté serveur, je créé en PHP
- Tous les points, chacun dispose d'une fonction "onMouseOver" qui lance ma fonction javascript "pop_div" en lui passant en argument le numéro du point, "no"
- Tous les divs "infos_no" (autant qu'il existe de points sur la carte) contenant les infos qui doivent s'afficher au survol du point associé.

Résultat sur la page générée en prenant par exemple le point 3:
côté js:

<script type="text/javascript">
function pop_div(no){ var element = document.getElementById.eval("infos_"+no); element.style.visibility = "visible"; }
function close_div(no){ var element = document.getElementById.eval("infos_"+no); element.style.visibility = "hidden"; }
</script>

le spot "3":

<div id="mon_point_3" style="position:relative;top:256px;left:482px;z-index:2">
  <img src="images/spot.png" border="0" alt="mon_point_3" onMouseOver="pop_div(3);">
</div>

le div "3" à faire poper

<div id="infos_3" style="position:absolute;top:10px;left:10px;visibility:hidden;z-index:6">{contenu html}</div>

dans mes fonctions js, eval("infos"+no) est censé pour moi valoir "infos_3" si je survole le point 3, et donc s'appliquer au div qui porte le nom "infos_3" et dans la fonction "pop_div" le rendre "visible", dans la fonction close_div, le rendre "hidden"

cependant ça ne fonctionne pas... et je cherche sans trouver pourquoi...

voilà si quelqu'un peut me mettre le nez sur ce qui coince, ça serait très sympa :)

A voir également:

[Js] Appel div avec nom variable concaténé?
Appel inconnu - Guide
Trouver une adresse avec un nom de famille gratuit ✓ - Forum Mobile
Js round ✓ - Forum Javascript
Trouver un nom avec une adresse ✓ - Forum Réseaux sociaux

4 réponses

Réponse 1 / 4

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
27 nov. 2008 à 20:19

Bonsoir,

var element = document.getElementById.eval("infos_"+no);

habituellement c'est de la forme:

var element = document.getElementById('id');

donc dans ton cas:

var element = document.getElementById(eval("infos_"+no));

ou essayes même:

var element = document.getElementById.l("infos_"+no);

lomic2 Messages postés 14 Date d'inscription lundi 22 janvier 2007 Statut Membre Dernière intervention 21 septembre 2012
27 nov. 2008 à 20:37

Merci pour ta réponse, hélas ça ne change rien à mon souci.

Cependant, comme j'ai le sentiment d'être proche de la solution et qu'en prime ta réponse m'incite à penser que je ne fais pas complètement n'importe quoi, j'élargis ma recherche...

Hypothèse 1: ça fonctionne mais je ne vois pas le div car il pope hors de ma vue
=> je pense pas car j'ai retiré toutes les contraintes de dimensions sur le div qui contient tout ce petit monde

Hypothèse 2: c'est l'appel à la fonction qui coince, j'ai positionné un

alert('fonction pop div');

à l'intérieur pour avoir une boite d'alerte lors de l'appel à la fonction...
=> la boite n'apparait pas :-?, la fonction est bien déclarée avant son appel, et lorsque j'appelais la version précédente de la fonction (qui ne prenait pas de paramètre), ça fonctionnait bien...

Je creuse toujours...

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894 > lomic2 Messages postés 14 Date d'inscription lundi 22 janvier 2007 Statut Membre Dernière intervention 21 septembre 2012
27 nov. 2008 à 20:57

Je vois que tu as Firefox, alors utilises tu la console d'erreurs du menu Outils ?

Elle te sort les erreurs Javascript

lomic2 Messages postés 14 Date d'inscription lundi 22 janvier 2007 Statut Membre Dernière intervention 21 septembre 2012 > Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017
27 nov. 2008 à 21:25

pas bête mais rien d'intéressant à part quelques warning à propos d'une propriété "filter" abandonnée mais elle est là pour des questions de compatibilité avec d'autres navigateurs ;)

en y regardant de plus près:

function pop_div(no)

change le nom de l'argument " no" est peut être un nom réservé ??

ensuite dans l'appel de la fonction:

onMouseOver="pop_div(3)

il faut passer une valeur:

onMouseOver="pop_div('3')

3 est considéré comme une variable si elle n'est pas entre '

Je vais tenter de changer mon nom de variable tu as peut-être raison.

Pour les quotes j'y ai pensé après et j'en ai ajouté, cependant ça ne change pas :)

Merci encore pour ton aide ;)

Réponse 2 / 4

lomic2 Messages postés 14 Date d'inscription lundi 22 janvier 2007 Statut Membre Dernière intervention 21 septembre 2012
27 nov. 2008 à 22:52

Petit progrès...

J'ai changé mon "onMouseOver" en "onClick" pour déclencher plus sûrement l'affichage du div et là j'ai une erreur javascript qui me parait intéressante:

"infos_1 is not defined"

côté div il y en a bien un qui s'appelle "infos_1" par contre c'est peut-être au niveau de ma fonction "pop_div" avec le document.getElementById qui ne trouverait pas l'élément qui s'appelle "infos_1" ?

Je creuse je creuse, je sens que c'est pas loin :D

Je retente les variantes de syntaxe de cette partie avec "eval" ou "l"

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
27 nov. 2008 à 22:55

il faut :

var element = document.getElementById(eval("infos_"+no));

oui je viens de tester avec

document.getElementById.l("infos_"+no);

et il me pointe une erreur sur

document.getElementById.l

"is not a function" ;)

retour à

var element = document.getElementById(eval("infos_"+div_number));

(no est devenu div_number)

retour à l'erreur "infos_1 is not defined"

tu as une erreur la:

document.getElementById.l("infos_"+no);

il y a un point et un l ou un 1 en trop, il ne faut rien entre getElementById et les ()

Réponse 3 / 4

lomic2 Messages postés 14 Date d'inscription lundi 22 janvier 2007 Statut Membre Dernière intervention 21 septembre 2012
27 nov. 2008 à 23:26

j'avance... j'avance ;)

à coup de boite d'alerte, je constate que l'appel à la fonction est ok, quel le paramètre est bien passé, j'ai un peu modifié:

var div_number = "infos_" + numero; alert('div number: ' + div_number); var element = document.getElementById(div_number); element.style.visibility = "visible";

là j'ai bien une alerte qui me dit "div_number: infos_1", impeccable
et je vois apparaitre furtivement mon div, reste à voir pourquoi il disparait, comme si le passage à "visible" ne tenait pas...

ça avance!

Réponse 4 / 4

lomic2 Messages postés 14 Date d'inscription lundi 22 janvier 2007 Statut Membre Dernière intervention 21 septembre 2012
27 nov. 2008 à 23:31

Bon ben ça fonctionne, code final:

<script type="text/javascript">
function popup_div(numero){ var div_number = "infos_" + numero; var element = document.getElementById(div_number); element.style.visibility = "visible"; }
function close_div(numero){ var div_number = "infos_" + numero; var element = document.getElementById(div_number); element.style.visibility = "hidden"; }
</script>

pour les appels aux fonctions:

<img src="images/spot.png" border="0" alt="mon_point_3" onMouseOver="popup_div('3');">
<img src="images/close.png" onclick="close_div('3')"

merci Alain tu m'as permis d'y voir plus clair!

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
27 nov. 2008 à 23:33

ok, mets résolu

bonne nuit

@lain

Discussions similaires

Annuaire portable gratuit à partir d'un nom

Code de renvoi d'appel : Ooredo, Mobilis...

Comment trouver un numéro à partir du nom et prénom

PB pour trouver le nom d'une image

"Nom de l'adresse" lors d'une inscription sur une site