[Js] Appel div avec nom variable concaténé? [Résolu/Fermé]

Signaler
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012
-
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
-
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 :)

4 réponses

Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
889
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);
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012

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...
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
889 >
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012

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

Elle te sort les erreurs Javascript
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012
>
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017

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 ;)
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
889 >
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012

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 '
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012
>
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017

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 ;)
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012

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"
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
889
il faut :

var element = document.getElementById(eval("infos_"+no));
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012
>
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017

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"
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
889 >
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012

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 ()
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012

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!
Messages postés
14
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
21 septembre 2012

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!
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
889
ok, mets résolu

bonne nuit

@lain