Bonjour à tous les Zero !

J'ai créé il y a bientôt deux mois un script permettant aux visiteurs de mon site de les aider dans une manipulation sur leur iTouch. Le fonctionnement du script est visible sur cette page : lien.

Il y a 3 étapes : chacune dure 10 secondes (elles s'enchainent automatiquement).
Je voudrais qu'un décompte s'affiche à chaque étape : 9, 8, 7...

Ce décompte marche bien pour la première étape, mais pas pour les autres, pourquoi ?

var retardateur;
var retardateur2;

// --------
// Compteur

var secondes = 9;
var timer;
var text = "";

function Chrono()
{
	if (secondes > 0)
	{
		var minutes = Math.floor(secondes/60);
		secondes -= minutes * 60;

		text = secondes;
		secondes = secondes + (minutes * 60) - 1;
	}
	else
	{
		clearInterval(timer);
		text = "";
	}
	document.getElementById('chrono').innerHTML = text;
}

function DemarrerChrono()
{
	timer = setInterval('Chrono()', 1000);				
}

// Fin compteur
//-------------

function dfustart()
{
	alert('Avant de commencer :\nAssurez vous que votre iTouch soit connecté à votre ordinateur !');
	dfu1();
}


function ButtonStart()
{
	document.getElementById('start').style.display = 'none';
	ButtonRestart();
	//setTimeout('ButtonRestart()',1500);
}

function ButtonRestart()
{
	document.getElementById('restart').style.display = 'block';
} 

 
function dfucache()
{
	document.getElementById('image1').style.display = 'none';
	document.getElementById('image2').style.display = 'none';
	document.getElementById('image3').style.display = 'none';
	document.getElementById('restart').style.display = 'none';
} 


function dfu1()
{
	secondes = 9;
	DemarrerChrono();

	// On affiche le div IMAGE1
	document.getElementById('image1').style.display = 'block';
	
	// On lance la fonction dfu2 après 10 secondes
	retardateur=setTimeout('dfu2()',10000);
}

function dfu2()
{	
	secondes = 9;
	DemarrerChrono();
	
	// On cache le div IMAGE1
	document.getElementById('image1').style.display = 'none';
	
	// On affiche le div IMAGE2
	document.getElementById('image2').style.display = 'block';
	
	// On lance la fonction dfu3 après 10 secondes
	retardateur2=setTimeout('dfu3()',10000);
}

function dfu3()
{
	DemarrerChrono();

	// On cache le div IMAGE2
	document.getElementById('image2').style.display = 'none';
	
	// On affiche le div IMAGE3
	document.getElementById('image3').style.display = 'block';
}


function recommencer()
{
	clearTimeout(retardateur);
	clearTimeout(retardateur2);
	dfucache();
	document.getElementById('restart').style.display = 'block';
	setTimeout('dfu1()',1500);
}

Sur la page :

<div id="dfu-buttons">
    <input type="button" onClick="ButtonStart(), dfustart()" value="Commencer" id="start"><input type="button" onClick="recommencer()" value="Recommencer" id="restart">
</div>
<div id="image1">
    <img src="http://www.itouchfrance.fr/images/dfu-helper-1.jpg" alt="" />
    <div style="z-index: 2; position:relative; margin-left: 20px;">
        <span style="font-size: 1.4em">Etape 1 :</span><br />
        Maintenir : <strong>POWER</strong> et <strong>HOME</strong> ensemble<br />
        <p id="chrono"></p>
    </div>
</div>
<div id="image2">
    <img src="http://www.itouchfrance.fr/images/dfu-helper-2.jpg" alt="" />
    <div style="z-index: 3; position:relative; margin-left: 20px;">
        <span style="font-size: 1.4em">Etape 2 :</span><br />
        Relâcher <strong>POWER</strong>
        <p id="chrono"></p>
    </div>
</div>
<div id="image3">
    <img src="http://www.itouchfrance.fr/images/dfu-helper-3.jpg" alt="" />
    <div style="z-index: 4; position:relative; margin-left: 20px;">
        <span style="font-size: 1.4em">Etape 3 :</span><br />
        Votre iPod Touch devrait être en mode DFU !
        <p id="chrono"></p>
    </div>
</div>

D'autre part, la fonction "recommencer()" ne marche pas : le compteur s'emmêle les pinceaux...

Merci d'avance

Bah pour t'aiser tu peut aller sur
http://www.html.net
Mais le site en francais

Utilise plutot les setTimeout et surtout vas voir le tuto de nod_ sur le js pour t'éviter quelques erreurs (ca t'éviteras aussi d'avoir un nod_ furieux qui te dira gentillement (ou presque) qu'il ne faut pas mettre de guillemets sur les setTimeout/Interval ).

Avez vous une idée qui m'aiderais à faire fonctionner mon script ? Peux être suis je partis sur une mauvaise base pour ce système de compte à rebours... ?

Je vais étudier ce que tu m'a dis Timot

Le problème vient du fait que des trois <p> ont le même id "chrono".

A la fin de la première étape, tu masques le div contenant le premier <p id="chrono">, cependant, c'est toujours celui-ci qui affiche le décompte... mais il est masqué

Une solution pourrait être de ne mettre qu'un seul <p id="chrono">, commun aux trois étapes.


Par contre, tu as aussi un autre problème dans ton code.
Plutôt que d'appeler l'étape suivante avec un setTimeout, tu ferais mieux de l'appeler une fois le décompte terminé...
(Parce que dans la situation actuelle, la condition else de Chrono() n'est jamais exécuté (et donc le premier timeout n'est jamais supprimé)).

Merci bien J'avais pas vu les choses sous cet angle !
En attendant une réponse, j'avais essayé un autre système de décompte qui marche...

Mais beaucoup moins optimisé puisque j'ai créé deux fonctions chrono. Au bout du 1er décompte > seconde = 0, alors je réinitialise seconde, mais ça ne marche pas.

Bah essaie plutôt de te baser sur la solution que j'ai donné, je pense que c'est le plus simple...

Ce que j'ai mis en place marche :
http://www.itouchfrance.fr/dfu-helper- [...] ape-par-etape

Je te remercie encore

OK bon bah pense à mettre le sujet en résolu (lien en bas de page)