Discussion :

[MadChan]

Bonjour à tous,

Je suis actuellement en train de développer une application web en JS dont le but est de créer des illustrations à base de post-it, et de connaitre le nombre de post-it nécessaires.

Pour cela j'ai fait deux inputs pour choisir le nombre de lignes et de colonnes. Ce qui me dessine une grille de carrés vide au fur et à mesure qu'on augmente ou diminue les paramètres.
De plus, j'ai créer une grille de 9 couleurs.
Le but rechercher etant de mettre en surbrillance la case de la couleurs choisie et d'appliquer cette couleurs dans la grille vide soit par le click soit par le survol.

Je n'arrive pas du tout cette dernière partie. Pourriez vous me donner un coup de main svp. Voici le code déjà fonctionnel :
post-it.html

merci d'avance.

[NoSmoking]

Bonjour et bienvenue sur DVP.

Regarde du coté des événements onclick et/ou onmouseover/out.

Tu aurais intérêt à mettre tes écouteurs sur la TABLE.

[MadChan]

J'ai du mal a voir ou mettre dans ce que j'ai deja rédiger les ecouteurs.

tu peux m'aider stp

[Lakhdr]

Si j'ai bien compris !!!

Je te propose de faire ca avec des click

quand tu click sur une cellule coloriée et en suite tu click sur la cellule qui vient de se creer celle ci prend la coleur selectionnée
pour ca declare une variable globale a ton code js dans laquelle tu sotckera la couleur selectionnée.
puis sur chaque cellule tu attacheras une event click

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
window.globalColour='""; // a declarer des le debut (ou var...)

....

for(row=0;row<heightID.value;row++){
				tr=document.createElement('tr');
				for(cell=0;cell<widthID.value;cell++){
					td=document.createElement('td');
					td.onclick=function(){
					if(globalColour)
	   this.style.backgroundColor=globalColour;
	}

					tr.appendChild(td);
				}


....


td = document.createElement("td"); // Création de notre deuxième case
    tr.appendChild(td); // On place la seconde case dans la (première) ligne
	td.style.backgroundColor='blue' ; 
	td.onclick=function(){
	   globalColour='blue'
	}
...

Si t as pas compris ce code ou que moi j ai pas compris ta question
tu me diras plus

[NoSmoking]

Mettre un écouteur sur chaque cellules n'est pas une bonne solution dans ce cas, il est préférable de mettre, comme dit plus haut, un écouteur sur la TABLE parent et de faire en fonction du besoin

Code :

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

1
2
3
4
5
6
7
8
var oTable = document.getElementById('la_table');
oTable.onclick = function(e){
  e = e || window.event;
  var oElem = e.target || e.srcElement;
  if( oElem.tagName === 'TD'){
    oElem.classList.toggle('clicked');
  }
};

dans le code ci dessus chaque click sur une cellule, et ce quelle que soit la cellule, ajoute/supprime la classe clicked, on peut gérer de la même façon le mouseover/out même si le CSS me parait plus indiqué pour ces événements.

[SylvainPV]

@NoSmoking: c'est marrant que tu ais pensé à window.event et srcElement pour les IE<9, mais que tu utilises classList.toggle juste derrière qui lui est IE10 minimum. Allez, c'est 2016, on oublie IE et on passe un petit coup d'autopolyfiller et d'es5-shim derrière

[MadChan]

OK pour gérer ca avec du CSS mais comment tu fais ? -> novice :/