11548 sujets

JavaScript, DOM et API Web HTML5

Problème avec une variable [résolu]

Bonjour à tous,
je cherche à afficher une image avec un petit script:

<body>
<script type="text/javascript">
var haut=0;
var larg=0;
var nom="carnet_sante_1.jpg";
document.write("<img src='carnet_sante_1.jpg'  id=certif height=100px width=100px style='position:absolute; top:300px; left:400px; '>");
alert('La variable est: '+nom);
</script></body>


ça marche OK (bien sûr !),
alors que:

<body>
<script type="text/javascript">
var haut=0;
var larg=0;
var nom="carnet_sante_1.jpg";
document.write("<img src=nom id=certif height=100px width=100px style='position:absolute; top:300px; left:400px; '>");
alert('La variable est: '+nom);
</script></body>


ne marche pas, bien que que la variable soit bien reconnue puisqu'elle s'affiche correctement dans la boite "alerte" Smiley decu

Je ne comprend pas pourquoi ??
Si quelqu'un pouvait éclairer le débutant que je suis...

Philippe
Modifié par filtep (28 Feb 2011 - 09:10)
Bonjour,

Vois-tu une différence entre les deux cas de figure dans ton code?
var nom = "Quelque chose";
document.write("<img src=nom>"); 
alert("La variable est: " + nom);

Tu peux aussi tester cette variante:
var nom = "Quelque chose";
alert("nom");
alert(nom);


Bien entendu, quand on veut faire du JavaScript il n'est pas interdit d'apprendre les bases de ce langage avec un bon bouquin sur le sujet. Smiley smile
Modifié par fvsch (25 Feb 2011 - 17:55)
J'ai trouvé d'ou venait le problème: le texte du document.write(...) doit être formaté et n'admet pas de variable tel quel. Il faut donc faire:

<script type="text/javascript">
var nom=""
var haut=0
var larg=0
function affiche(nom,haut,larg) {
var mention="<img src='"+nom+"' id=certif height="+haut+"px width="+larg+"px style='position:absolute; top:300px; left:400px;'>"
document.write(mention);
}
</script>


et là ça marche Smiley lol

Merci pour ton aide fvsch. Tu me dis à chacun de mes posts que ce serait bien d'apprendre...
Eh bien figures toi que c'est ce que je suis en train de faire ! d'où tous ces petits exercices
qui me permettent de comprendre et de progresser petit à petit Smiley cligne

A propos, le petit bout de code "qui marche" me pose un autre problème car la page se réouvre à chaque click sur la "vignette-lien" du coup la grande image n'apparait qu'une fraction de seconde, comment puis-je y remédier ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>essai vignette</title>
 

<script type="text/javascript">
var nom=""
var haut=0
var larg=0
function affiche(nom,haut,larg) {
var mention="<img src='"+nom+"' id=certif height="+haut+"px width="+larg+"px style='position:absolute; top:300px; left:400px;'>"
document.write(mention);
}
</script>


</head>
<body>

<a href="#"  onclick="affiche('carnet_sante_1.jpg',100,100)"><img src="carnet_sante_1vignette.jpg"></a> 


</body>
</html>

Merci d'avance.

Cordialement
Philippe
filtep a écrit :
J'ai trouvé d'ou venait le problème: le texte du document.write(...) doit être formaté et n'admet pas de variable tel quel.

À ma connaissance ce n'est pas le cas. Un autre exemple:
var maVariable = "kikoolol";
document.write("Du texte: " + maVariable); // écrit "Du texte: kikoolol"
document.write("Du texte: maVariable"); // écrit "Du texte: maVariable"

Est-ce que tu vois la différence?
(Voir aussi mon exemple plus haut avec alert plutôt que document.write (la logique est la même.)

filtep a écrit :
Tu me dis à chacun de mes posts que ce serait bien d'apprendre...
Eh bien figures toi que c'est ce que je suis en train de faire ! d'où tous ces petits exercices
qui me permettent de comprendre et de progresser petit à petit Smiley cligne

Damned, je radote.
Bon apprentissage. Smiley smile
Sinon, tu ne vas pas aller très loin avec document.write, c'est un outil pas vraiment adapté à ce que tu veux faire. Il faudrait plutôt regarder du côté des méthodes DOM (element.appendChild) ou de element.innerHTML. Ou travailler avec un élément qui reste en place mais dont tu changes les attributs.

Le code de ce tutoriel est intéressant à analyser:
http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html

Tu peux aussi voir cet exemple de script JS (qui utilise, entre autres, la création et l'insertion d'éléments HTML avec les méthodes DOM):
http://covertprestige.info/javascript/galerie-simpliste/
Merci pour ton aide,
J'ai bien compris la différence entre une variable et un texte nommant la variable, c'est effectivement ici qu'était le problème, j'aurais pu formater de document.write "en direct" en effet.
Pour le reste je vais étudier tout ça (demain car ce soir in y a les Césars !!!)
Sinon pour le fait que la page se recharge à chaque click sur la vignette-lien, tu aurais une piste éventuelle ? Je ne comprends pas...

A+
Philippe
Modifié par filtep (25 Feb 2011 - 20:14)
À priori il n'y a pas de raison pour que la page se recharge. Le comportement que j'attendrais ici, c'est que le navigateur retourne en haut de page et remette le focus au début du document, car tu cliques sur un lien qui pointe vers "#" (document en cours, aucune ancre).

Si tu veux faire un bouton qui serve de support à une action en JavaScript, dans l'absolu il ne faut pas utiliser un lien hypertexte mais plutôt un élément HTML fait pour ça:
<button type="button" onclick="...">
  ...
</button>

Par (mauvaise) habitude on utilise souvent des liens pour les boutons. Dans ce cas on est obligé de stopper l'action normale du lien, ce qui peut se faire de plusieurs manières (return false, stopPropagation...).
Pourtant c'est bien ce qui se passe, la grande image s'affiche une fraction de seconde car la page se recharge...
Si je met un "return:false" à la fin de la fonction l'affichage de la grande image ne se fait plus du tout... (idem si je le place après le "onclick, mais là je tâtonne total !) J'avoue que je suis un peu paumé là !!!

Philippe (bac +8, mais pas en informatique Smiley lol )
Le problème c'est l'utilisation de document.write(), qui sert à écrire un contenu à l'endroit où le document.write() est exécuté. En gros document.write() ne fonctionne correctement que lorsqu'il est exécuté directement par le code JavaScript dans un élément SCRIPT.

Quand tu places cette méthode dans une fonction et que tu exécutes cette fonction, ça donne des résultats très bizarres. Dans Firefox ça remplace le contenu du document actuel (la page) par le contenu à écrire. Un document.write('TEST'); appelé dans une fonction sur un évènement click me donne une page blanche avec écrit "TEST", par exemple.

Solution: ne pas utiliser document.write() qui n'est pas adapté, comme je le disais plus haut. Smiley cligne
Bonjour fvsch,
je change donc de méthode afin de suivre tes conseils, j'affiche une image initiale "vide" puis le click sur la vignette active la fonction js qui modifie les paramètres de l'image (src, taille, etc..)
sauf que: sous IE la "grande" image s'affiche bien à la taille demandée, alors que sous FF le document.getElementById.width (et height) semble ignoré...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>essai vignette</title> 
  
 
<script type="text/javascript"> 


var nom="" 
var haut=0 
var larg=0 
function affiche(nom,haut,larg) { 
document.getElementById ("grande").src=nom;
document.getElementById ("grande").style.width=larg;
document.getElementById ("grande").style.height=haut;
}
</script> 
 
 
</head> 
<body> 
 
<a href="#"  onclick="affiche('carnet_sante_1.jpg',100,100);"><img src="carnet_sante_1vignette.jpg"></a>  
 
 <img id="grande"  src=""  alt="" style="position:fixed; left:25%; top:25%; width:50px; height:50px;">
</body> 
</html>


J'ai vu sur pas mal de forums que getElementById et FF semblent souvent poser des problèmes mais je ne trouve pas de réponse à mon problème...

Si tu avais une idée... (je n'en doute pas une seconde)

Merci d'avance
Philippe
Le clic sur le lien lance l'exécution de la fonction affiche, mais recharge ensuite la page désignée par le href="#" (en reprenant la page initiale à défaut avec un # - voir l'adresse de la page rechargée) sauf si le click est neutralisé par un return false.

Quant aux dimensions des images il est préférable dans ces conditions de préciser les unités 

document.getElementById ("grande").style.width=larg+'px';
document.getElementById ("grande").style.height=haut+'px';
Il faut effectivement préciser l'unité si tu changes les valeurs des propriétés CSS width et height.

filtep a écrit :
J'ai vu sur pas mal de forums que getElementById et FF semblent souvent poser des problèmes

Ce n'est pas le cas.
Modifié par fvsch (28 Feb 2011 - 00:34)
Sujet clos
Aller à