getElementById et variable en parametre

Version imprimable

Bonjour a tous !

La question a été maintes fois abordée...
Diverses solutions/problemes sont apparus, vu et revu parmis tant de forums... Et pourtant pas moyen de trouver la solution de mon coté.
Jusqu'a présent j'avais contourné le probleme, mais c'est pas en contournant H24 que je résoudrais mes lacunes, donc je viens ici afin de parfaire mes compétence et palier a mon inculture :D

Voici la bete :
Code:

1 2 3 4 5 function demo(val){ alert(val.toString) ; // Retourne 50 alert(document.getElementById(val).innerHTML); // retourne une erreur (GEBI(val) is null) alert(document.getElementById("50").innerHTML); // retourne le contenu de la div dont l'id est 50 (le resultat attendu) }
Vous noterez que cette fonction n'est pas celle de base, mais un raccourci afin de nous éviter le superflu...
J'ai donc une fonction qui recupere une variable "val" qui est en réalité un "string" (ma page Html contient une centaine de div numerotées de 1 a 100 => Un jeu de l'oie grosso modo).
Le concept est d'afficher la div dans une popup grace a cette fonction demo (mais comme dis juste avant je n'ai aucun probleme avec le popup la n'est pas e probleme je l'ai donc effacé volontairement).

Le probleme vient donc de cette fameuse variable que je passe en parametre dans mon GetElementById...

Le ToString() me permet de dire que c'est bien une variable de type String (qui dans l'exemple vaut 50).
Le deuxieme alert est ce que j'aimerais obtenir mais c'est la ou le bas blesse, je n'y arrive pas.
Le Troisieme alert quant a lui me confirme que l'id "50" existe bien et qu'y'a pas de soucis a ce niveau.

En clair, pourquoi mon val ne s'interprete pas comme un String malgré les non-guillemets ? Et comment y remedier ?

Merci d'avance et bonne journée :)

22/10/2012, 09h36
SpaceFrog

Un id ne doit jamais être exclusivement numérique ni commencer par du numérique .

Citation:

Vous noterez que cette fonction n'est pas celle de base, mais un raccourci afin de nous éviter le superflu...

C'est une intention louable, mais malheureusement, tu as dû un peu trop "raccourcir" parce qu'en l'état, ton code ne pose aucun problème... :whistle:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>getElementById</title>
	<script type="text/javascript">
                function demo(val){
                        //alert(val.toString) ; // Retourne 50
                        alert('1 : ' + document.getElementById(val).innerHTML); // retourne une erreur (GEBI(val) is null)
                        alert('2 : ' + document.getElementById("50").innerHTML); // retourne le contenu de la div dont l'id est 50 (le resultat attendu)
                }
        </script>
</head>
<body>
	<div id="50">Coucou</div>
	<button onclick="demo(50)">Tester</button>
</body>
</html>

affiche correctement les deux messages.

22/10/2012, 11h52
Canabal

En effet...
Parti de ce constat j'ai refais mon truc, et de fait ca marche.

Apparemment, soit ce bout de code la qui appelait la fonction :

Code:

<a href="javascript:lancerF();" class="des">Lancer les Des</a>

qui merdait, soit le fait que j'passais par une deuxieme fonction pour lancer la popup avec un passage de parametre en plus toussa toussa... De toute facon comme d'habitude j'me complique la vie a vouloir trop structurer/chercher les facons les plus funs, et j'en oublie les bases...

En tout cas merci bien :)
22/10/2012, 11h55
SpaceFrog

Il faut éviter javascript: dans le href ...
et préférer passer par la onclick du lien en inhibant le href

Code:

<a href="#" onclik="lancerF(); return false;" class="des">Lancer les Des</a>