Sélectionner un nombre d'étoiles selon la note

**totot** · 27/01/2014, 11h48

Bonjour,

J'ai fait un système de notation et je souhaite récupérer ma donnée dans ma base (ça c'est bon) et selon la note, mettre le nombre d'étoiles qui correspond en jaune pour pouvoir ensuite modifier la note.

Voici mon javascript:

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
53
54
55
56
57
58
59
60
61
62
63
64
onload = function(){
  init();
};
// --------------
var StarOutSrc = 'images/starOut.png';
var StarOnSrc = 'images/starOver.png';
var n = 5;
// --------------
function init(){
	var html = '';
	for (i=0; i<n; i++){
		id = i+1;
		html += '<img src="'+StarOutSrc+'" ';
		html += 'id="star" value="off" ';
		html += 'onMouseOver="over('+id+');" ';
		html += 'onMouseOut="out('+id+');" ';
		html += 'onClick="on('+id+')"/></a>'
	}
	document.getElementById("note").innerHTML = html;
}
// --------------
function over(nb){
	elemClassement = document.getElementById("note");
	tabImg = elemClassement.getElementsByTagName("img");
 
	if (nb > 0){
		for (i=0; i<nb; i++){
			tabImg[i].src = StarOnSrc;
		}
	}
	for (i=nb; i<n; i++){
		tabImg[i].src = StarOutSrc;
	}
}
// --------------
function out(nb){
  elemClassement = document.getElementById("note");
  tabImg = elemClassement.getElementsByTagName("img");
 
  for (i=0; i<nb; i++){
    tabImg[i].src = StarOutSrc;
  }
  for (i=0; i<n; i++){
    if (tabImg[i].value == "on")
       tabImg[i].src = StarOnSrc;
  }
}
// --------------
function on(nb){
  elemClassement = document.getElementById("note");
  tabImg = elemClassement.getElementsByTagName("img");
 
  for (i=0; i<nb; i++){
    tabImg[i].src = StarOnSrc;
    tabImg[i].value="on";
  }
  for (i=nb; i<n; i++){
    tabImg[i].src = StarOutSrc;
    tabImg[i].value = "off";
  }
  // ICI, on rempli l'input hidden avec la valeur
  document.getElementById('notehidden').value = nb;
}
// --------------

Champs qui contient les étoiles

Code html :

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

1
2
<input type="hidden" id="noteh" name="note" value="<?php echo $ligne['note']?>"/>
<div id="note" name="cls"></div>

Merci de votre aide

**stephanegib2** · 27/01/2014, 15h05

C'est quoi la difficulté que tu rencontres ?

**totot** · 27/01/2014, 15h11

Donc, quand je lance un formulaire pour création, c'est la fonction init qui est appeler avec les étoile vide
Et là, je suis dans le cas d'une modification, je cherche donc un moyen d'afficher un nombre d'étoile colorié égal à ma note.
par exemple, si j'ai 3: je doit avoir les 3 première en jaunes et les deux autres blanches.
Je c'est que je doit refaire une fonction pour sa mais je vois pas comment faire

**totot** · 27/01/2014, 15h34

J'ai essayé de faire sa:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function charge(nb){
  var html = '';
  for (i=0; i<n; i++){
    id = i+1;
    html += '<img src="'+StarOutSrc+'" ';
    html += 'id="star" value="off" ';
    html += 'onMouseOver="over('+id+');" ';
    html += 'onMouseOut="out('+id+');" ';
    html += 'onClick="on('+id+')"/></a>'
  }
  document.getElementById("note").innerHTML = html;
}