Tengo un problema que posiblemente sea muy sencillo, tengo una función que cada vez que se recarga la pagina muestra en un div un contador, el problema que tengo es que cuando se genera otro elemento con el mismo id, no inicia el contador, solo se inicia en el primer elemento con el id. espero puedan entender mejor con el codigo. esta es la funcion de javascript del contador.
/*===========================================================
= funciones del cronometro tiempoMesa =
===========================================================*/
var inicio=0;
var timeout=0;
window.onload = function empezar()
{
if(timeout==0)
{
// Obtenemos el valor actual
inicio=vuelta=new Date().getTime();
// iniciamos el proceso
funcionando();
}
}
function funcionando()
{
// obteneos la fecha actual
var actual = new Date().getTime();
// obtenemos la diferencia entre la fecha actual y la de inicio
var diff=new Date(actual-inicio);
// mostramos la diferencia entre la fecha actual y la inicial
var result=LeadingZero(diff.getUTCHours())+":"+LeadingZero(diff.getUTCMinutes())+":"+LeadingZero(diff.getUTCSeconds());
document.getElementById('tiempoMesa').innerHTML = result;
// Indicamos que se ejecute esta función nuevamente dentro de 1 segundo
timeout=setTimeout("funcionando()",1000);
}
/* Funcion que pone un 0 delante de un valor si es necesario */
function LeadingZero(Time) {
return (Time < 10) ? "0" + Time : + Time;
}
/*===== End of funciones del cronometro tiempoMesa ======*/
Esta es la seccion del html donde esta el elemento del contador.
<div data-role="header" data-theme="b">
<h1>MESAS</h1>
</div>
<div id="cuentas" class="ui-grid-b" style="margin-top:10px">
<?
$query = "select idd, mesa, responsable, total, horallegada from mesas order by mesa+0";
$result = qry($query);
$result2 = qry($query);
$field_cnt = mysqli_fetch_array($result2);
if (is_null($field_cnt)) { ?>
<h2 align="center">No hay mesas abiertas, selecciona <span>NUEVA MESA</span> para iniciar pedido.</h2>
<? }else {
while($row = mysqli_fetch_array($result)) { ?>
<div class="ui-block-b">
<a id="mesaid" href="?page=cuenta&c=<?= $row['mesa']?>" class="ui-btn ui-shadow ui-btn-b categoria" data-ajax="false">MESA:<?= $row['mesa']?>
<p>$ <?=number_format($row['total'])?></p>
<p><?=$row['responsable']?></p>
<p id='tiempoMesa'>00:00:00</p>
</a>
</div>
<?
} }
?>
</div>
Postdata: Si alguien puede hacer que al reiniciar la pagina o el navegador, el contador continué ejecutándose y no se reinicie, se lo agradecería.