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 :/

[MadChan]

Je suis vraiment en galère sur ce problème de survol et/ou de clic.

Je dois rendre mon site prochainement ...

Connaissez vous des âmes charitables capable de m'implémenter mon code d'origine au moins pour que ça fasse la sélection par le clic et/ou le survol.

Je vous remercie par avance

voici le fichier a implementer:
post-it.html

[NoSmoking]

@Sylvain : figures toi que c'est la réflexion que je me suis faite quand j'ai relu la réponse après l'avoir postée, mais difficile de changer de vielles habitudes. Promis en 2016 je vais faire de gros effort

@MadChan :

OK pour gérer ca avec du CSS mais comment tu fais ?

• pour le survol il suffit de mettre dans le CSS

Code css :

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

1
2
3
td:hover {
  background-color:#abc; /* par exemple */
}

• pour le click tu as la réponse au dessus, que je reprend au format XXI siècle

Code :

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

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

mais regarde également ce que t'as mis Lakhdr, cela correspond peut être mieux à ton besoin réel, je parle pour l'action à exercer sur le click/hover.

Connaissez vous des âmes charitables capable de m'implémenter mon code d'origine au moins pour que ça fasse la sélection par le clic et/ou le survol.

Je pense que tu es le mieux placé pour y arriver

[MadChan]

Bonsoir à tous,
Je suis toujours sur mon histoire de couleur à faire glisser dans des cases.
J'ai écris quelques lignes en JS pour gérer ceci sauf que ca ne marche pas. Est ce que quelqu'un voit mon erreur svp.

index.phpjs.j.js

merci d'avance.

La date limite de mon rendu approche

[NoSmoking]

Non seulement tu nous permet d'y voir plus clair rapidement merci pour le

...sauf que ca ne marche pas.

qui est des plus instructif, mais en plus il faut que l'on charge ton fichier qui au final s’avère ne servir à rien puisse que tu ne nous fournies même pas le code javascript.

Et ultime question résolu, comme cela est indiqué, or not ?

[MadChan]

Bonjour,

Le "résolu" était une erreur. Je code JS est attaché au message mais je peux aussi vous le copier en direct comme ceci :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//Initialisation des couleurs
var choix = 'black';
 
//réglage du mouseover
var x=0;
 
//Décompte des post_it par couleurs 
var count = {"rouge" :0,"violet":0,"bleu_clair"=0,"turquoise"=0,"vert":0,"jaune":0};
 
 
//Recupération du choix de la couleur
function check_color(color){
	choix = color.style.backgroundColor;
}
 
//Coloriage au click
function coloriage_click (case_vide){
	x=1;
	coloriage(case_vide);
}
 
//Cliquer déplacer
function cliquer_deplacer(case_vide){
	if(x==1){
		coloriage(case_vide);
	}
}
 
//Reset
function supp(){
	x=0;
}
 
//Coriage/effacer des cases
function coloriage(case_vide){
	if (case_vide.style.backgroundColor == 'black' ) {
		case_vide.style.backgroundColor = choix;
		count[choix] +=1;
		var couleur = document.getElementById(choix);
		if (couleur != null){
			couleur.innerHTML = count[choix];
		}
	}
	else if (case_vide.style.backgroundColor != 'black'){
		count[case_vide.style.backgroundColor] -= 1;
		var couleur = document.getElementById(case_vide.style.backgroundColor);
		if (couleur !=null){
			couleur.innerHTML = count[case_vide.style.backgroundColor];
		}
		case_vide.style.backgroundColor='black';
	}
}

La méthode est celle expliquée par un ami mais je ne comprend pas ou ca beug ...

Merci

[NoSmoking]

Je code JS est attaché au message

effectivement pas vu qu'il y avaient 2 liens collés.


Difficile de continuer à t'aider tu ne fais pas assez preuve de rigueur, sans aller bien loin, ta ligne 8

Code :

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

var count = {"rouge" :0,"violet":0,"bleu_clair"=0,"turquoise"=0,"vert":0,"jaune":0};

que font des = dans la déclaration d'un objet ?

Peut être devrais tu regarder cette discussion.

Pourtant je le répète tu as tout pour y arriver.

Une dernière chose au passage dans cette partie de ton code

Code html :

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

1
2
3
4
5
6
7
8
9
<form action="" method="post">		
<!-- Definition de la grille sur laquelle on va travailler -->
<fieldset>
  <legend>Dessine moi une grille</legend>
  <label>Nombre de colonnes (1 à 30) : <input type="number" id="largeur" name="largeur" value="0" min="1" max="30" step="1" /></label><br />
  <label>Nombre de lignes (1 à 30) : <input type="number" id="hauteur" name="hauteur" value="0" min="1" max="30" step="1" /></label><br />
  <input type="submit" value="valider"></input>
</fieldset>
</form>

le moindre clic sur le bouton valider recharge ta page et je ne suis pas sûr que cela soit ce que tu souhaites.

[MadChan]

Merci pour vos conseils. Je projet est terminé, non sans mal.

A bientot