Lancer deux chrono sur une même page

Bonjour à tous,

J'ai un script permettant de lancer un chronomètre sur une page en cliquant sur un bouton (et de l'arrêter de la même façon).

Maintenant je souhaiterai mettre deux chronos (voir plus) sur la même page, mais je ne sais pas comment faire. J'arrive à déclencher les deux chronomètres mais je n'arrive pas à remettre le compteur du deuxième chronomètre à zéro (tout en gardant l'information du premier chronomètre).

Si quelqu'un a une idée

Merci d'avance!

voici le script en question :

<script type="text/javascript"><!--
var zecsec = 0;
var seconds = 0;
var startchron = 0;

function startChr(chrono) {
this.chrono = chrono;
startchron = 1; chronometer(); }
function stopChr(chrono) { startchron = 0; }

function chronometer() {
  if(startchron == 1) {
    zecsec += 1;

    if(zecsec > 9) {
      zecsec = 0;
      seconds += 1;
    }

    document.getElementById("showtm"+this.chrono).innerHTML = seconds+ '<sub>'+ zecsec+ '</sub>';

setTimeout("chronometer()", 100);
  }
}
--></script>

Chrono 1
<div id="showtm1" style="font-size:21px; font-weight:800;">0:0</div>
<button onclick="startChr(1)">Start</button>
<button onclick="stopChr(1)">Stop</button>

<br>
Chrono 2
<div id="showtm2" style="font-size:21px; font-weight:800;">0:0</div>
<button onclick="startChr(2)">Start</button>
<button onclick="stopChr(2)">Stop</button>

Bonjour,

Le problème est que pour faire ton code, tu utilise 3 variables "globales" que tu réutilise lorsque tu lance d'autres compteurs:

var zecsec = 0;
var seconds = 0;
var startchron = 0;

Ainsi, ce que tu voudras faire, c'est de créer une instance de compteur chaque fois que tu lanceras un nouveau compteur. Ce faisant, tes variables seront réinitialisée et indépendante.

Par exemple, en utilisant un objet et le "scope" (portée) des variables :

var Compteur = function() {
	
	// Variables privée à cet objet
	var zecsec = 0;
	var seconds = 0;
	var startchron = 0;
	
	this.start = function() {
		// code pour lancer le compteur
	}
	
	this.stop = function() {
		// code pour arrêter ton compteur
	}
	
	// etc...
}

// On crée un compteur
var compteur1 = new Compteur();
compteur1.start();

// On en crée un autre
var compteur2 = new Compteur();

// ... etc

Merci Vaxilart,

j'ai commencé à regarder mais pour le moment je n'y arrive pas

je regarderai plus longuement ce WE

<script type="text/javascript"><!--
var Compteur = function() {

   var seconds = 0;
   var startchron = 0;

   this.start = function(chrono) {
      this.chrono = chrono;
      startchron = 1;
      chronometer();
   }

   this.stop = function(chrono) {
      this.chrono = chrono;
      startchron = 0;
   }

function chronometer() {
  if(startchron == 1) {
    seconds += 1;

    document.getElementById("showtm"+this.chrono).innerHTML = seconds;

setTimeout("chronometer()", 1000);
  }
}

var compteur1 = new Compteur();

var compteur2 = new Compteur();
--></script>

Chrono 1
<div id="showtm1" style="font-size:21px; font-weight:800;">0:0</div>
<button onclick="compteur1.start(1);">Start</button>
<button onclick="compteur1.stop(1);">Stop</button>

<br>
Chrono 2
<div id="showtm2" style="font-size:21px; font-weight:800;">0:0</div>
<button onclick="compteur2.start(2);">Start</button>
<button onclick="compteur2.stop(2);">Stop</button>

Bonjour,

En ouvrant ta console, tu aurais pu voir que ton code javascript générais plusieurs erreurs. Ceci causait évidemment problème.

Cela dit, tu étais sur la bonne voix. J'ai organisé mieux organiser ton code ici pour que tu puisse travailler sur de bonnes base:

http://jsfiddle.net/vaxilart/PyubF/

Maintenant, tu y es presque. Seulement, tes variables compteur* sont inaccessibles au sein de ton document. Et de toute manière, utiliser l'attribut onclick="" directement sur un élément est une très mauvaise pratique.

Regarde du côté de la fonction attachEventHandler() pour lier le click à tes fonctions. Tout cela au sein de ton code javascript; ce qui te permettra de mieux séparer le comportement de ton code HTML. (évidemment, si tu veux que cela marche sur les anciennes version d'Internet Explorer, tu devras utiliser un fallback pour attachEventHandler ou une librairie comme jQuery pour te faciliter la vie et améliorer l'organisation de ton code)

Surtout, n'oublie pas de toujours ouvrir ta console javascript lorsque tu développe afin d'être en mesure de repérer rapidement les erreurs. Et aussi, la majorité des éditeurs de texte supportent des outils (comme jsLint et jsHint) vérifiant la qualité/validité de ton code Javascript en temps réel. Tu devrais y regarder de plus prêt, l'aide que ces outils apporte est invaluable.

Si tu as d'autres questions, n'hésite pas. Et surtout, n'hésite pas à utiliser le document que je t'ai envoyé sur jsFiddle et à y faire tes modifications directement afin de pouvoir fournir un exemple fonctionnel lorsque tu demande de l'aide
Modifié par Vaxilart (02 Jun 2012 - 02:44)

Bonjour,

Je te conseille de préfixer tes recherches google avec "mdn" lorsque tu recherche de la documentation sur une fonction/méthode Javascript. Le site du "Mozilla Developper Network" est très complet et l'information y est sérieuse !

Ainsi, tu aurais pu trouver cette page

https://developer.mozilla.org/fr/DOM/element.addEventListener

P.S.: Personnellement, ton exemple sur jsFiddle ne fonctionne pas..?