Discussion :

[moimp]

Bonjour à tous,
Fort de mon expérience POO en PHP, j'essaie de réécrire complètement un code JS très lourd (c'est moi qui l'ai écrit) en programmation orientée objet en JS et bien sûr, je ne m'en sors pas.
Le but est de composer des lignes de badge. Une ligne de badge est représentée par deux lignes d'un tableau. La première ligne du tableau sert à définir le style css, la seconde le contenu.
Voici le début de mon code

Code javascript :

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
console.log(fromPHPtoJS); // Transmission de variables depuis php. Certains noms ont été modifiés
var //form22		= document.querySelector('#form22'),
	addLine		= document.querySelector('#addLine');
	//recallList	= document.querySelector('#recallList'),
	//delSave		= document.querySelector('#delSave'),
 
var badgeLinesCount	= 0,
	badgeLines		= [],
	styleCells		= [], // Ensemble des cellules de la ligne de style
	styleCell		= {}; // Caractéristiques d'une cellule de style (contenu dans styleCells)
 
const styleCellNb = 8;
 
// Ajout d'une ligne de badge
function AddBadgeLine(lStyle, lContent) {
	this.lStyle		= document.createElement('tr'); // Ligne de formatage
	this.lContent	= document.createElement('tr'); // Ligne de donnée
	console.log(24,this.lStyle);	// [object HTMLTableRowElement]
	console.log(25,this.lContent);	// [object HTMLTableRowElement]
	this.addCell = function (line, value, rowspan) { // line = lStyle ou lContent
		styleCells.push(document.createElement('td'));
 
	}
}
 
 
// Ecouteur ajout ligne de badge
addLine.addEventListener('click', function() {
	badgeLines.push(new AddBadgeLine());
}, false);
 
console.log(badgeLines);

En php, j'aurais créé une classe pour l'ajout de cellule, mais il me semble qu'en JS, c'est plus intéressant de le mettre en méthode du constructeur. Quoi qu'il en soit mon code ne marche pas et la dernière ligne retourne un tableau vide.
Edit: Ajout de la console, Ajout de commentaires dans le code.

[NoSmoking]

Bonjour,

Quoi qu'il en soit mon code ne marche pas et la dernière ligne retourne un tableau vide.

sans rentrer dans les détails au moment de l'appel de ton console.log ton tableau est vide, il n'y pas encore eu de click.

Essaie en déplaçant l'appel

Code :

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

1
2
3
4
5
// Ecouteur ajout ligne de badge
addLine.addEventListener('click', function() {
    badgeLines.push(new AddBadgeLine());
    console.log(badgeLines);
}, false);

[moimp]

Merci, je vois. Mais sans rentrer moi non plus dans les détails, j'ai fait plusieurs confusions en construisant ce code. Je suis donc en train de le réécrire en créant des constructeurs pour travailler réellement en POO pour créer les différents éléments de mon tableau (lignes, cellules, contenu des cellules).
J'abandonne donc ce sujet et le marque comme résolu.