[Javascript] Problème entre deux fonctions

Problème entre deux fonctions [Javascript] - HTML/CSS - Programmation

Marsh Posté le 09-12-2007 à 20:41:25    

Hello,
 
j'utilise Mootools et j'ai un conflit entre ces fonctions:
 
 
js:

Code :
  1. window.addEvent('domready', function() {
  3. var highlight = $$('.highlighting');
  5. highlight.each(function(h) {
  6.  h.addEvent('click', function(e) {
  7.   e = new Event(e);
  8.   this.highlight('#eeeeaa');
  9.   e.stop();
  10.  });
  11. });
  13. });
  16. window.addEvent('domready', function() {
  17. $('format').getElements('input').addEvent('click', function() {
  18. $('selection-format').innerHTML = this.id;
  19. });
  20. });


 
html:
 

Code :
  1. <fieldset id="format">
  2. <p><label class="highlighting">
  3. <img src="js/chk_on.png" id="img_radio_cd" alt="Bouton radio" />
  4. <input id="cd" onclick="turnImgRadio3(this)" type="radio" checked="checked" value="cd" name="format" /><strong>édition CD</strong>
  5. </label> ou</p>
  6. <p><label class="highlighting">
  7. <img src="js/chk_off.png" id="img_radio_dvd" alt="Bouton radio" />
  8. <input id="dvd" onclick="turnImgRadio3(this)" type="radio" value="dvd" name="format" /><strong>édition DVD</strong>
  9. </label> ?</p>
  10. </fieldset>


 
si j'enléve la fonction highlight (pour faire un effet d'opacité au click sur <label> ), la fonction pour connaitre quel input est selectionné (qui va inscrire le résultat dans un <span id="selection-format"></span> ) fonctionne... j'en déduit un problème mais je ne vois pas ou :/
 
merci
 
je précise qu'au départ, les deux fonctions ensemble ne fonctionnent pas.
 
++

Reply

Marsh Posté le 09-12-2007 à 20:41:25   

Reply

Marsh Posté le 10-12-2007 à 09:50:23    

Tu ajoutes deux eventHandler pour un évènement. Mais ton browser n'en prends qu'un !
 

Code :
  1. window.addEvent('domready', function()
  2. {
  3.     //Trucs à faire 1 : ajout des highlight
  4.     var highlight = $$('.highlighting');
  5.     highlight.each(function(h) {
  6.     //...
  7.  
  8.     //Trucs à faire 2 : gestion des clics sur certains éléments
  9.     $('format').getElements('input').addEvent('click', function() {
  10.     //...
  11.  
  12. }


 
Je ne vois vraiment pas pourquoi tu veux utiliser deux fonctions pour gérer la réponse à un seul évènement (domReady).
 
Note : je suis débutant en JS, alors peut-être j'ai dit des conneries !


Message édité par kao98 le 10-12-2007 à 09:51:27

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

Marsh Posté le 10-12-2007 à 11:35:56    

Ben même en essayant ça, ça fonctionne pas...
 
J'ai plusieurs window.addEvent('domready', function()  , jamais eu de problèmes avant.

Message cité 1 fois
Reply

Marsh Posté le 10-12-2007 à 11:43:37    

Badaboum11 a écrit :


J'ai plusieurs window.addEvent('domready', function()  , jamais eu de problèmes avant.


Je ne vois pas l'intérêt. Même si ça fonctionne, ça rend ton code moins lisible ! Le jour ou tu recherche ce qui se passe sur tel évènement, plutôt que d'avoir une fonction qui gère tout ce qu'il doit se passer, tu en as plusieurs. Tu vas en lire une sans forcément tout de suite penser que tout ce qui se passe n'est pas dans cette fonction là, mais dans une autre !
 
Edit : m'enfin, concernant ton problème, là comme ça, je ne vois pas, désolé :/


Message édité par kao98 le 10-12-2007 à 11:44:32

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

Marsh Posté le 10-12-2007 à 12:08:38    

Bon, j'ai pu qu'un seul domready :p
 
Voilà mon code mootools complet:
 

Code :
  1. window.addEvent('domready', function(){
  2. var slides = [];
  3. $$('.slideables').each(function(mySlide){
  4.   slides[slides.length] = new Fx.Slide(mySlide).hide();
  5. });
  7. $$('.toggle').addEvent('click', function(e){
  8.   e = new Event(e);
  9.   slides.each(function(mySlide){
  10.     mySlide.toggle();
  11.   });
  12.   e.stop(); 
  13. });
  15. var slides = [];
  16. $$('.slideables2').each(function(mySlide){
  17.   slides[slides.length] = new Fx.Slide(mySlide).hide();
  18. });
  20. $$('.toggle2').addEvent('click', function(e){
  21.   e = new Event(e);
  22.   slides.each(function(mySlide){
  23.     mySlide.toggle();
  24.   });
  25.   e.stop(); 
  26. });
  29. var highlight = $$('.highlighting');
  31. highlight.each(function(h) {
  32.  h.addEvent('click', function(e) {
  33.   e = new Event(e);
  34.   this.highlight('#eeeeaa');
  35.   e.stop();
  36.  });
  37. });
  40. $('distro').getElements('input').addEvent('click', function() {
  41. $('selection-distro').innerHTML = this.id;
  42. });
  44. $('architecture').getElements('input').addEvent('click', function() {
  45. $('selection-archi').innerHTML = this.id;
  46. });
  48. $('format').getElements('input').addEvent('click', function() {
  49. $('selection-format').innerHTML = this.id;
  50. });
  52. var Tips2 = new Tips($$('.toggle'), {
  53. initialize:function(){
  54.  this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  55. },
  56. onShow: function(toolTip) {
  57.  this.fx.start(1);
  58. },
  59. onHide: function(toolTip) {
  60.  this.fx.start(0);
  61. }
  62. });
  64. var Tips2 = new Tips($$('.toggle2'), {
  65. initialize:function(){
  66.  this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  67. },
  68. onShow: function(toolTip) {
  69.  this.fx.start(1);
  70. },
  71. onHide: function(toolTip) {
  72.  this.fx.start(0);
  73. }
  74. });
  75. });


 
Le problème est toujours le même, et j'en ai un autre sur la fonction toggle: les liens de classe ".toggle" et ".toggle2" n'agissent que sur les div de classe ".slideables2" ..  les div ".slideables" ne se déroulent plus en cliquant sur un lien ".toggle" ..
 
++
 

Reply

Marsh Posté le 10-12-2007 à 23:25:16    

un problème au niveau de var slides = [];  ?  Je suis débutant aussi, j'arrive pas à me corriger :p

Reply

Marsh Posté le 11-12-2007 à 12:55:15    

personne? :(

Reply

Marsh Posté le 12-12-2007 à 10:27:26    


Code :
  1. var highlight = $$('.highlighting');
  2. this.highlight('#eeeeaa');


 
je crois que le conflit nait plutot ici
tu peux avoir autant de domready que tu veux c est certainement pas un probleme
mais nommer une variable avec un nom de fonction est une tres mauvaise idee

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 12-12-2007 à 13:36:45    

mIRROR a écrit :


Code :
  1. var highlight = $$('.highlighting');
  2. this.highlight('#eeeeaa');


 
je crois que le conflit nait plutot ici
tu peux avoir autant de domready que tu veux c est certainement pas un probleme
mais nommer une variable avec un nom de fonction est une tres mauvaise idee


 
 
en effet, ça va mieux, mais  la fonction ne fonctionne pas :/ ya pas d'effet:
 

Code :
  1. window.addEvent('domready', function() {
  3. var highlighting = $$('.highlighting');
  5. highlight.each(function(h) {
  6.  h.addEvent('click', function(e) {
  7.   e = new Event(e);
  8.   this.highlighting('#eeeeaa');
  9.   e.stop();
  10.  });
  11. });
  13. });


 
spa bon?

Reply

Marsh Posté le 12-12-2007 à 19:44:56    

mais tu comprends pas ce que tu fais [:pingouino dei]

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 12-12-2007 à 19:44:56   

Reply

Marsh Posté le 12-12-2007 à 23:13:37    

mIRROR a écrit :

mais tu comprends pas ce que tu fais [:pingouino dei]


si je savais déjà comment faire et tout, je posterais pas...

Reply

Marsh Posté le 13-12-2007 à 08:17:56    

au depart je croyais que t avais juste un petit conflit a resoudre
maintenant je vois qu il y a jamais eu de conflit: ta fonction highlight n a jamais marché quoi [:petrus dei]
 
lis un peu
http://docs.mootools.net/Effects/Fx-Style.js

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 13-12-2007 à 11:56:31    

mIRROR a écrit :

au depart je croyais que t avais juste un petit conflit a resoudre
maintenant je vois qu il y a jamais eu de conflit: ta fonction highlight n a jamais marché quoi [:petrus dei]

 

lis un peu
http://docs.mootools.net/Effects/Fx-Style.js


si, elle a déjà fonctionné...

 

la doc n'est pas celle-là, FxStyle est remplacé par FxTween à partir de la 1.2 bêta: http://docs12b.mootools.net/Fx/Fx.Tween  et oui je l'ai déjà lu :)

 

donc:

 
Citation :

Examples:

 

$('myElement').highlight('#ddf'); //a quick light blue highlight

 

Ce qui dans mon cas devient

 
Code :
  1. $$('.highlighting').highlight('#eeeeaa')
 

ce qui nous fait:

Code :
  1. window.addEvent('domready', function() {
  2. $$('.highlighting').highlight('#eeeeaa')
  3. });
 

Là ça fonctionne, mais l'effet apparait dès le chargement. Comment rajouter l'événement sur le click?
Je n'ai réussit qu'a trifouiller depuis une autre fonction existante, et rien.  Donc je trifouille mal :)

 

un

Code :
  1. window.addEvent('click', function() {
  2. $$('.highlighting').highlight('#eeeeaa')
  3. });


fonctionn, mais le problème c'est qu'il highlight tous les textes pourvus de la class highlighting au même moment.. et moi j'aimerais que non: effet seulement sur le morceau de texte ou l'on a cliqué.

 


Personne pour m'aider?

Message cité 1 fois
Message édité par Badaboum11 le 13-12-2007 à 12:02:51
Reply

Marsh Posté le 13-12-2007 à 12:18:07    

Badaboum11 a écrit :


Citation :

Examples:

 

$('myElement').highlight('#ddf'); //a quick light blue highlight



 

tu comprends cette ligne :??:

Badaboum11 a écrit :


Ce qui dans mon cas devient

 
Code :
  1. $$('.highlighting').highlight('#eeeeaa')




surement pas la tu as un tableau d elements ...pas UN element (meme si mootools permet ce raccourci mais bon...)

Badaboum11 a écrit :

 

ce qui nous fait:

Code :
  1. window.addEvent('domready', function() {
  2. $$('.highlighting').highlight('#eeeeaa')
  3. });
 



pas du tout
tu veux ajouter ton evenement sur les elements de $$('.highlighting') pas sur window

Badaboum11 a écrit :


Là ça fonctionne, mais l'effet apparait dès le chargement. Comment rajouter l'événement sur le click?
Je n'ai réussit qu'a trifouiller depuis une autre fonction existante, et rien.  Donc je trifouille mal :)

 



pas des le chargement mais le domready... le load est beaucoup plus tard (de quelques millisecondes a plusieurs secondes selon le nombre d images et d autres parametres)

Badaboum11 a écrit :


un

Code :
  1. window.addEvent('click', function() {
  2. $$('.highlighting').highlight('#eeeeaa')
  3. });


fonctionn, mais le problème c'est qu'il highlight tous les textes pourvus de la class highlighting au même moment.. et moi j'aimerais que non: effet seulement sur le morceau de texte ou l'on a cliqué.


je suis désolé mais ca sert a rien de trifouiller sans comprendre [:spamafote]
tu dis que t as lu la doc (ce dont je doute mais passons) mais tu n y comprends absolument rien
http://docs12b.mootools.net/Elemen [...] t:addEvent
fais toi plaisir et essaie juste de comprendre comment on ajoute un evenement sur un element
prends ton temps car le copier coller ne t aidera jamais a comprendre


Message édité par mIRROR le 13-12-2007 à 12:18:48

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 13-12-2007 à 12:53:17    

Il suffit de regarder la doc pour voir qu'elle est uniquement fondée sur les ID, dès qu'on veut appliquer à des class, c'est la merde...
 
pour l'effet highlight, on ne peut même pas utiliser un système avec les ID correctement, exemple:
 
js:
 

Code :
  1. window.addEvent('click', function() {
  2. $('bla1bla1').highlight('#eeeeaa')
  3. });
  5. window.addEvent('click', function() {
  6. $('blablabla').highlight('#eeeeaa')
  7. });


 
html:
 

Code :
  1. <p><label id="bla1bla1">1</label></p>
  2. <p><label id="blablabla">2</label></p>


 
Un clic sur le label bla1bla1 fait un effet sur le blablabla aussi...

Message cité 1 fois
Reply

Marsh Posté le 13-12-2007 à 13:35:26    

Badaboum11 a écrit :

Il suffit de regarder la doc pour voir qu'elle est uniquement fondée sur les ID, dès qu'on veut appliquer à des class, c'est la merde...
 
pour l'effet highlight, on ne peut même pas utiliser un système avec les ID correctement, exemple:
 
js:
 

Code :
  1. window.addEvent('click', function() {
  2. $('bla1bla1').highlight('#eeeeaa')
  3. });
  5. window.addEvent('click', function() {
  6. $('blablabla').highlight('#eeeeaa')
  7. });


 
html:
 

Code :
  1. <p><label id="bla1bla1">1</label></p>
  2. <p><label id="blablabla">2</label></p>


 
Un clic sur le label bla1bla1 fait un effet sur le blablabla aussi...


tu comprends rien a ce que tu fais c est dramatique :/
c est pas le clic sur blabla1 qui declenche le truc c est un clic n importe ou dans ta fenetre  
tu sais meme pas a quel element tu ajoutes ton evenement ?


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 13-12-2007 à 13:35:34    

C'est normal ! Tu ajoutes ton event à l'objet window, pas à un de tes objets auxquels tu veux appliquer ton effet !


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

Marsh Posté le 13-12-2007 à 15:31:23    

[:prozac]

Message cité 1 fois

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 13-12-2007 à 16:17:56    

Shinuza a écrit :

[:prozac]


 

Citation :

tu comprends rien a ce que tu fais c est dramatique :/


Oui, vous pouvez vous amuser à me voir ramer mais c'est pas grave...
 
mais merci, j'ai quand même compris quelques trucs.
 
bye.

Message cité 2 fois
Reply

Marsh Posté le 13-12-2007 à 16:24:36    

M'enfin, c'est pas comme si le site de Mootools était gavé d'exemples.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 14-12-2007 à 06:42:19    

Badaboum11 a écrit :


 

Citation :

tu comprends rien a ce que tu fais c est dramatique :/


Oui, vous pouvez vous amuser à me voir ramer mais c'est pas grave...
 
mais merci, j'ai quand même compris quelques trucs.
 
bye.


Tu empiles conneries sur conneries dans ton code, et mirror et shinuza essayent de t'expliquer !!!

Reply

Marsh Posté le 14-12-2007 à 09:07:30    

Badaboum11 a écrit :


 

Citation :

tu comprends rien a ce que tu fais c est dramatique :/


Oui, vous pouvez vous amuser à me voir ramer mais c'est pas grave...
 
mais merci, j'ai quand même compris quelques trucs.
 
bye.


Tu veux utiliser des concepts que tu es loin de maitriser, mais tu ne cherches pas à comprendre on dirait ! Revois donc les bases de JS avant de continuer ton projet !


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

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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