Discussion :

[Javalad]

Bonjour,

En pleine création de mon site perso, j'ai acheté une template pas très cher sur internet, à ma surprise il y a un peu de javascript, langage que je ne maîtrise pas !
Voici le code en PJ, c'est la partie "competences" de mon site internet. J'essaye désespérément d'afficher les valeurs que je souhaite dans les différents cercles.
Lorsque je modifie les valeurs dans "this._percentage" et "this._number" dans le code javascript, les valeurs sont modifiés dans tous les cercles (j'ai essayé comme vous pouvez le voir pour "circles-3"). Je souhaiterai savoir si je peux changer individuellement la valeur de chaque cercle ?

Merci d'avance de votre réponse.

[Kennel sébastien]

Bonjour,

En fait il vous faut modifier votre fichier HTML.

Il y a une variable « var colors » vous faite la même chose, vous créez une variable « let percentages »…

Remarque : aujourd'hui « var » et à remplacer par « let » dans la majorité des cas, c'est lié à la portée…

[NoSmoking]

Bonjour,
si on parle du code issu de https://github.com/lugolabs/circles, je ne trouve pas l'approche judicieuse !
Je partirais sur une déclaration des propriétés dans des attributs data-xxx ce qui présenterais l'avantage de séparer le JS du HTML et de se passer des ID nutile.

Code html :

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

<div class="circle" data-value="50" data-color="#D3B6C6"></div>

et en récupérant les éléments comme suit

Code :

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

1
2
3
4
5
var oCircles = document.querySelectorAll('.circle');
var i, nb = oCircles.length;
for( i=0; i < nb; i +=1){
  // création des circles en récupérant les valeurs
}

PS : merci de mettre le code sous format texte et non image.

[Javalad]

Bonjour,

Merci pour vos réponses,

Concernant la "var elId = " dans le code javascript, que dois-je écrire en valeur ?

Cordialement

[Loralina]

Bonjour,
Pour la méthode avec les ID :
Dans le deuxième code, il n'est pas utile de faire un "getElementById" avec pour unique objectif de récupérer l'ID puisque vous l'avez déjà (c'est le paramètre de la fonction).
Ensuite, pour le nommage, vous pouvez être plus précis ("circle_WebDesign"...) et libre (ne dépendant pas de l'ordre).
Pour la correspondance niveau js et la boucle, par exemple, avec les noms actuels :

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
var ar_st_colo=["#ced7df","#76b852"];
var ob_ob_propCirc={
	"circles-1":{nb_perc:10,ar_st_colo:ar_st_colo},
	"circles-2":{nb_perc:20,ar_st_colo:ar_st_colo},
	"circles-3":{nb_perc:30,ar_st_colo:ar_st_colo},
	"circles-4":{nb_perc:40,ar_st_colo:ar_st_colo}};
/*//variante (boucle à adapter)
var ar_ob_propCirc=[
	{st_id:"circles-1",nb_perc:10,ar_st_colo:ar_st_colo},
	...];*/
for(var i in ob_ob_propCirc)
	{
	var ob_propCirc=ob_ob_propCirc[i];
	Circles.create({
		id:i,
		percentage:ob_propCirc.nb_perc,
		...
		colors:ob_propCirc.ar_st_colo});
	}

Concernant la "var elId = " dans le code javascript, que dois-je écrire en valeur ?

options.id

[NoSmoking]

La première chose à dire est qu'il est déconseillé de modifier le constructeur d'un objet d'une librairie sans en connaitre les parfaites implications.

La solution de Loralina en bouclant sur un objet est également une solution.

Je développe mon approche, en partant du code HTML suivant :

Code html :

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

1
2
3
4
5
6
7
<div id="canvas">
    <div class="circle" data-pourcent ="31.42" data-color="#D3B6C6,#4B253A"></div>
    <div class="circle" data-pourcent ="51.1"  data-color="#FCE6A4,#EFB917"></div>
    <div class="circle" data-pourcent ="60.94" data-color="#BEE3F7,#45AEEA"></div>
    <div class="circle" data-pourcent ="70.78" data-color="#F8F9B6,#D2D558"></div>
    <div class="circle" data-pourcent ="50.2"  data-color="#F4BCBF,#D43A43" data-width="20"></div>
</div>

on pourrait appliquer le code suivant :

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
var oElems = document.querySelectorAll('.circle');
var i;
var nb = oElems.length;
var oElem;
var color;
var oCircles = [];
 
for (i = 0; i < nb; i += 1) {
  oElem = oElems[i];
  oElem.id = 'circle-' + i; // visiblement on a besoin d'avoir une ID
  // get les couleurs
  color = oElem.dataset.color;
  // création des jauges
  oCircles.push(Circles.create({
    id: oElem.id,
    value: oElem.dataset.pourcent || 0,
    radius: oElem.dataset.radius || 60,
    width: oElem.dataset.width || 10,
    colors: color ? color.split(',') : ['#CCC', '#888']
  }));
}

Il faut bien sûr adapter les valeurs suivant le besoin.

Nota : le script a besoin d'une ID, mais celle ci peut être dynamique.