Discussion :

[F.P.S.]

Bonjour,

Voila, j'ai un petit problème de "collision" sur le code suivant. Au lieu d'afficher successivement 'Chapitre 1' puis 'Chapitre 2', cela affiche 'Chapitre 2' et 'Chapitre 2'.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var oO = (function() {
 
  var target = 'section'
  var value = ''
 
  function execute() {
    targetNode.appendChild(document.createTextNode(value));
  }
 
  function addEvent(elem, type, func) {
    return elem.addEventListener?
      elem.addEventListener(type, func, false):
      elem.attachEvent?
        elem.attachEvent('on'+type, func):
        elem['on'+type] = func;
  }
 
  return {
    init:
      function(string) {
        value = string;
        targetNode = document.getElementById(target);
        if (targetNode) {
          addEvent(window, 'load', function() {
            execute();
          });
        }
      }
  }
 
 
}) ();
 
oO.init('Chapitre 1');
oO.init('Chapitre 2');

Si ce code parait disproportionné pour afficher 2 lignes dans le corps de la page, c'est une simplification d'un code plus vaste pour en comprendre l'origine du problème.

Merci par avance pour votre aide.

[gwyohm]

Bonjour et bienvenue sur le forum.

A chaque fois que tu execute ta methode init, tu assigne une nouvelle valeur au membre privé value.

[F.P.S.]

Oui car j'aimerais que cette valeur soit stocker en tant qu'attribut de l'objet afin de pouvoir être utilisé par les méthodes.

Cependant et c'est là où je ne comprends pas le problème, c'est que le 2ème appel (oO.init('Chapitre 2') semble écraser le premier.

Est ce qu'il y a une erreur ? Est ce qu'il y a un problème de méthode ?

[Bovino]

Cependant et c'est là où je ne comprends pas le problème, c'est que le 2ème appel (oO.init('Chapitre 2'); ) semble écraser le premier.

C'est effectivement le cas car tes deux appels se font sur la même instance de oO :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
new oO.init('Chapitre 1');
new oO.init('Chapitre 2');

[F.P.S.]

Donc, je comprends que l'erreur vient du fait que j'utilise la même instance de l'objet oO.

Par conséquent, je dois créer une nouvelle instance de l'objet oO, ce que j'ai essayé de faire avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
new oO.init('Chapitre 1');
new oO.init('Chapitre 2');

à la place de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
oO.init('Chapitre 1');
oO.init('Chapitre 2');

Cependant, je me retrouve toujours avec le même problème, cela affiche 'Chapitre2' et 'Chapitre2' au lieu de 'Chapitre1' et 'Chapitre2'.

[gwyohm]

Le souci, c'est que oO n'est pas un constructeur. C'est un objet créé par le résultat d'une fonction anonyme.
Soit tu changes ta méthode init pour qu'elle enregistre différement le listener sur le load :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var oO = (function() {
  
  var target = 'section'
  var value = ''
  
  function execute(string) {
    targetNode.appendChild(document.createTextNode(string));
  }
  
  function addEvent(elem, type, func) {
    return elem.addEventListener?
      elem.addEventListener(type, func, false):
      elem.attachEvent?
        elem.attachEvent('on'+type, func):
        elem['on'+type] = func;
  }
  
  return {
    init:
      function(string) {
        //value = string;
        targetNode = document.getElementById(target);
        if (targetNode) {
          addEvent(window, 'load', function() {
            execute(string);
          });
        }
      }
  }
  
  
}) ();

Soit tu modifies ton code pour gérer plusieurs instances

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var oO = function(string) {
 
  var target = 'section';
  var value = string;
 
  var execute = function(string) {
    targetNode.appendChild(document.createTextNode(value));
  };
 
  var addEvent = function(elem, type, func) {
    return elem.addEventListener?
      elem.addEventListener(type, func, false):
      elem.attachEvent?
        elem.attachEvent('on'+type, func):
        elem['on'+type] = func;
  };
 
  targetNode = document.getElementById(target);
  if (targetNode) {
    addEvent(window, 'load', function() {
      execute();
    });
  }
};
// ...
new oO("Chapitre 1");
new oO("Chapitre 2");

[F.P.S.]

OK, bien noté. Je vais modifier mon script en conséquence.
Merci pour le coup de main.