Deux compteurs sur la même page

Version imprimable

Bonjour,

J'ai 2 compteurs sur la même page, je voulais cliquer sur le premier et s'incrémente, et sur le deuxième et s'incrémente aussi, mais dans mon cas, je clique sur le premier, il s'incrémente jusqu'à par exemple (3), je clique sur le deuxième et continue le compte à partir de 3 et non à partir de 0; voici un DEMO et le code:
Code:

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 function counter(){ var maxCount = [5, 10]; var string = ['Done', 'Well Done']; var count = 0; $(".counter").click(function(){ count++; var getID = $(this).attr('id'); //alert(getID); var setPlace = 'disp'+getID; //console.log('count '+count); var indexKey = maxCount.indexOf(count); console.log('index '+indexKey); if(indexKey >=0){ var msg = string[indexKey]; console.log(msg); } $("#"+setPlace).html(count); }); } //counter('dispCounter', 10); counter();
HTML:
Code:

1 2 3 4 5 6 7 <a class="counter" id="Counter1">Counter1</a> <div id="dispCounter1"></div> <br /> <a class="counter" id="Counter2">Counter2</a> <div id="dispCounter2"></div>
Merci a vous

22/04/2016, 10h32
Darkauron

Salut,

Dans ton code, tu n'as qu'une seule variable "count" utilisé par les 2 compteurs.

Si tu veux 2 compteurs différents, il faut 2 variables. Une autre solution, qui ne serait pas la bonne selon moi, serait de récupérer qui est dans la div que laquelle tu cliques.

Citation:

Envoyé par Darkauron

Dans ton code, tu n'as qu'une seule variable "count" utilisé par les 2 compteurs.

J'ai essayé avec switch, et cela reste toujours bloqué, DEMO:

Code:

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
function counter(){
 
var count1 = 0;
var count2 = 0;
 
$(".counter").click(function(){
 
  var getID = $(this).attr('id');
  //alert(getID);
 
  switch(getID){
  	case 'LaIlaha':
    	//var count1 = 0;
      var count = count1;
      count++;
      var maxCount = [5, 8];
      var string = ['ilaha1', 'ilaha_1'];
    break;
 
    case 'NabiSalat':
    	//var count2 = 0;
      var count = count2;
      count++;
    	var maxCount = [2, 5];
      var string = ['salat1', 'salat2'];
    break;
  }
 
  var setPlace = $(this).next().attr('id');
  console.log(setPlace);
 
  var indexKey = maxCount.indexOf(count);
  console.log('index '+indexKey);
 
  if(indexKey >=0){
  var msg = string[indexKey];
 
  console.log(msg);
 
    }
 
$("#"+setPlace).html(count);
});
}
 
//counter('dispCounter', 10);
counter();

HTML:

Code:

1
2
3
4
5
6
7
<a class="counter" id="LaIlaha" name="0">Counter1</a>
<div id="dispCounter1"></div>
 
<br />
 
<a class="counter" id="NabiSalat">Counter2</a>
<div id="dispCounter2"></div>

23/04/2016, 07h55
NoSmoking
Bonjour,
il me semble qu'il y a plus simple en récupérant le contenu de la <div> et en incrémentant sa valeur, ce qui pourrait donner d'après ton code exemple
Code:

1 2 3 var oDest = document.getElementById(setPlace); var count = (parseInt(oDest.textContent) || 0) +1; oDest.textContent = count;
24/04/2016, 03h42
Fredy007

Citation:

Envoyé par Darkauron

Si tu veux 2 compteurs différents, il faut 2 variables.

Avez vous une idée?
24/04/2016, 03h42
Fredy007

Citation:

Envoyé par NoSmoking

Bonjour,
il me semble qu'il y a plus simple en récupérant le contenu de la <div> et en incrémentant sa valeur, ce qui pourrait donner d'après ton code exemple
...

J'essais de mettre en place la solution de Darkauron
25/04/2016, 10h54
Darkauron

Salut,

En déroulant tes scripts, tu devrais te rendre compte de ton problème.

En suivant le script :
Je clique sur "Counter1".
count prend la valeur count1.
J'incrémente count.
J'affiche count.

Résultat des valeurs : count vaut 1, et count1 vaut ... 0.

Tu ne mets pas à jour count1 et count2, ton compteur repart toujours de 0.

Citation:

Envoyé par Darkauron

Tu ne mets pas à jour count1 et count2, ton compteur repart toujours de 0.

Ah oui, j'ai oublié d'incrémenter count1 et count2, j'ai copié collé le code sans modifier les valeurs d'incrémentation, voici la DEMO et le code final:

HTML:

Code:

1
2
3
4
5
6
7
<a class="counter" id="LaIlaha" name="0">Counter1</a>
<div id="dispCounter1">0</div>
 
<br />
 
<a class="counter" id="NabiSalat">Counter2</a>
<div id="dispCounter2">0</div>

jQuery:

Code:

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
function counter(){
 
var count1 = 1;
var count2 = 1;
 
$(".counter").click(function(){
 
  var getID = $(this).attr('id');
  //alert(getID);
 
  switch(getID){
  	case 'LaIlaha':
    	//var count1 = 0;
      var count = count1;
      count1++;
      var maxCount = [5, 8];
      var string = ['ilaha1', 'ilaha_1'];
    break;
 
    case 'NabiSalat':
    	//var count2 = 0;
      var count = count2;
      count2++;
    	var maxCount = [2, 5];
      var string = ['salat1', 'salat2'];
    break;
  }
 
  var setPlace = $(this).next().attr('id');
  console.log(setPlace);
 
  var indexKey = maxCount.indexOf(count);
  console.log('index '+indexKey);
 
  if(indexKey >=0){
  var msg = string[indexKey];
 
  console.log(msg);
 
    }
 
$("#"+setPlace).html(count);
});
}
 
//counter('dispCounter', 10);
counter();

Merci a vous tous