[RESOLU] [JS] Echanger deux images

Echanger deux images [RESOLU] [JS] - HTML/CSS - Programmation

Marsh Posté le 15-03-2010 à 13:34:26    

Bonjour.
Dans le cadre d'exercices de fabrication de pages web avec JS, on nous avait demandé il y a quelques semaines de créer un formulaire d'échanges de deux images.
J'ai eu beau retourner ce problème dans tous les sens, je n'ai JAMAIS réussi a faire fonctionner ce script comme je l'entendais. Tout au plus, je peux echanger deux images mais PAS revenir au point de départ.. :/
La question n'est pas de me donner du code, mais de m'expliquer POURQUOI mon code ne fonctionne pas.
 
---
 

Code :
  1. <html>
  2. <head>
  3. <title>Formulaire d'&eacute;change d'images</title>
  4. <script language="Javascript">
  5. function clickette()
  6. {
  7. // Si escargot a l'url de fleur (donc, apres le premeir clic sur le bouton)
  8. if (document.getElementById('escargot').src==document.getElementById('fleur_cachee').value)
  9. {
  10. // Alors escargot prend l'url de escargot et fleur l'url de fleur
  11. document.getElementById('escargot').src=document.getElementById('escargot_cache').value;
  12. document.getElementById('fleur').src=document.getElementById('fleur_cachee').value;
  13. }
  14. else
  15. // Sinon, escargot prend l'url de fleur et fleur prend l'url de escargot
  16. {
  17. document.getElementById('escargot').src=document.getElementById('fleur_cachee').value;
  18. document.getElementById('fleur').src=document.getElementById('escargot_cache').value;
  19. }
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <!-- Aide : http://www.ac-creteil.fr/util/prog [...] mages.html -->
  25. <form name="changement" action="post">
  26. <input type="hidden" id="fleur_cachee" value="img/triFoliumBleu.png">
  27. <input type="hidden" id="escargot_cache" value="img/escargotViolet.png">
  28. <img src="img/escargotViolet.png" id="escargot" />
  29. <input type="button" value="<<--->>" onClick="clickette();" />
  30. <img src="img/triFoliumBleu.png" id="fleur" />
  31. </form>
  32. </body>
  33. </head>
  34. </html>


Message édité par Fork Bomb le 15-03-2010 à 16:36:11

---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
Reply

Marsh Posté le 15-03-2010 à 13:34:26   

Reply

Marsh Posté le 15-03-2010 à 13:44:30    

Tu te complique beaucoup trop la tâche. Va au plus simple.
 
Tu as deux variables a et b. Comment tu inverses leurs valeurs respectives ? Le plus simplement du monde ?


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 15-03-2010 à 13:49:19    

kao98 a écrit :

Tu te complique beaucoup trop la tâche. Va au plus simple.
 
Tu as deux variables a et b. Comment tu inverses leurs valeurs respectives ? Le plus simplement du monde ?


Oui, je sais.
Il faut utiliser un temp.
Bizarrement, autant ça me parait "normal" en prog' "classique", autant, quand c'est JS... ben non :(
Pour me rassurer, je préfère avoir deux variables con-con desquelles je ne modifie pas la valeur (et je tape dedans pour avoir mes src) plutôt que le classique "2 valeurs a échanger, donc une valeur tampon à ajouter".


---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
Reply

Marsh Posté le 15-03-2010 à 13:53:43    

Fork Bomb a écrit :


Oui, je sais.
Il faut utiliser un temp.
Bizarrement, autant ça me parait "normal" en prog' "classique", autant, quand c'est JS... ben non :(
Pour me rassurer, je préfère avoir deux variables con-con desquelles je ne modifie pas la valeur (et je tape dedans pour avoir mes src) plutôt que le classique "2 valeurs a échanger, donc une valeur tampon à ajouter".


Qu'est-ce qui t'échappe ? Parce que c'est pourtant la même chose !
Déjà, un truc qui ne va pas dans ton code, c'est que tu utilises des champs HTML (les hidden) comme des variables js. Pourquoi ne pas utiliser une (ou plusieurs si tu veux) variables js plutôt que de tout mélanger ?
 
Commence par le commencement : l'algo de base de ce problème, lequel est-il ? :o

Message cité 1 fois
Message édité par kao98 le 15-03-2010 à 13:54:59

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 15-03-2010 à 15:28:37    

kao98 a écrit :


Qu'est-ce qui t'échappe ? Parce que c'est pourtant la même chose !
Déjà, un truc qui ne va pas dans ton code, c'est que tu utilises des champs HTML (les hidden) comme des variables js. Pourquoi ne pas utiliser une (ou plusieurs si tu veux) variables js plutôt que de tout mélanger ?

 

Commence par le commencement : l'algo de base de ce problème, lequel est-il ? :o


Si je le savais, mon problème serait résolu depuis longtemps et ça me prendrait pas la tête :/
---
EDIT : J'ai mal lu la question.
---
EDIT2
Si l'image de gauche n'a pas la "bonne" url (par rapport à la disposition de départ)
alors, on inverse les deux images
Sinon
on remet les deux images "correctement"

Message cité 1 fois
Message édité par Fork Bomb le 15-03-2010 à 15:32:40

---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
Reply

Marsh Posté le 15-03-2010 à 15:35:57    

Fork Bomb a écrit :


Si je le savais, mon problème serait résolu depuis longtemps et ça me prendrait pas la tête :/
---
EDIT : J'ai mal lu la question.


Non, c'est pas ça !
C'est encore plus simple ! C'est juste de l'inversion, c'est tout !
 
a est une variable  
b est une variable  
temp est une variable  
 
temp := a
a := b
b := temp
 
 
 
Il suffit de :
- transposer ça en js
- faire pour que, dans notre cas, a référence directement à la première image, et b à la seconde
 
Tu sais, le fait que ce soit du js, ça ne change rien à l'algo de départ !


Message édité par kao98 le 15-03-2010 à 15:41:22

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 15-03-2010 à 16:21:01    

Code :
  1. <html>
  2. <head>
  3. <title>Formulaire d'&eacute;change d'images</title>
  4. <script language="Javascript">
  5. function clickette()
  6. {
  7. temp=document.getElementById('escargot').src;
  8. document.getElementById('escargot').src=document.getElementById('fleur').src;
  9. document.getElementById('fleur').src=temp;
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <!-- Aide : http://www.ac-creteil.fr/util/prog [...] mages.html -->
  15. <form name="changement" action="post">
  16. <img src="img/escargotViolet.png" id="escargot" />
  17. <input type="button" value="<<--->>" onClick="clickette();" />
  18. <img src="img/triFoliumBleu.png" id="fleur" />
  19. </form>
  20. </body>
  21. </head>
  22. </html>


 
Bon, celui-là fonctionne ad vitam aeternam sans que je comprenne pourquoi.
Je ne fait aucune vérif' (pas if...then...else), je n'utilise plus de champ caché et pourtant... ça marche T_T
Juste le coup du fichier "temp" qui me permet quand même de faire les échanges à l'infini...
Comprends pô :/


---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
Reply

Marsh Posté le 15-03-2010 à 16:28:04    

Fork Bomb a écrit :


 
Bon, celui-là fonctionne ad vitam aeternam sans que je comprenne pourquoi.
Je ne fait aucune vérif' (pas if...then...else), je n'utilise plus de champ caché et pourtant... ça marche T_T
Juste le coup du fichier "temp" qui me permet quand même de faire les échanges à l'infini...
Comprends pô :/


Tu ne comprends pas ? C'est pourtant super simple !!
 
Bon, pour simplifier, on va parler de a et de b à la place de tes images, mais ça revient au même.
 
Au départ, on a quelque chose comme
a = "chemin1"
b = "chemin2"
 
Quand on clique sur le bouton, on exécute ton code JS.
La première ligne :
temp = a
 
temp prend la valeur de a, et contient donc "chemin1".
a contient toujours "chemin1", et b "chemin2"
 
Ensuite, on fait
a = b
Donc a = "chemin2"
A ce moment là, on a a qui contient "chemin2", b contient également "chemin2", et temp contient "chemin1".
 
Enfin, on fait  
b = temp
donc on place la valeur de temp dans b, donc b contient à présent "chemin1". Et voilà, nos valeurs sont inversée ! Il n'y a pas de magie là dedans !
 
C'est plus clair comme ça ?
Le principe, c'est pas de vérifier ce que contiennent nos variables, c'est de les inverser, tout simplement.


Message édité par kao98 le 15-03-2010 à 16:30:09

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 15-03-2010 à 16:30:37    

Ce qui m'échappe, c'est POURQUOI mes valeurs continuent de tourner.
Qu'elles tournent UNE FOIS, c'est normal, je l'ai écrit.
Mais... les autres tours ? :/


---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
Reply

Marsh Posté le 15-03-2010 à 16:33:09    

Fork Bomb a écrit :

Ce qui m'échappe, c'est POURQUOI mes valeurs continuent de tourner.
Qu'elles tournent UNE FOIS, c'est normal, je l'ai écrit.
Mais... les autres tours ? :/


Parce qu'on les inverse, quoi qu'elle contiennent !
 
C'est pourtant pas sorcier !
 
Bon, pour prendre un exemple trèèèès imagé :
 
Si tu as une tasse pleine de café, et une autre pleine de thé.
Si tu veux inverser leur contenu, tu prends une tasse vide, tu verse la tasse 1 dans la tasse temp, puis la tasse 2 dans la tasse 1, puis la tasse temps dans la tasse 2.
 
Si tu répètes l'opération, tu interverti à chaque fois le contenu de tes tasses :spamafote:
 
C'est de l'inversion, quel que soit la valeur de tes variables, on les inverses !


Message édité par kao98 le 15-03-2010 à 16:34:06

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 15-03-2010 à 16:33:09   

Reply

Marsh Posté le 15-03-2010 à 16:35:37    

Ah oui, merde. Quel boulet >.<
---
Merci pour ta patience :)


---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed