0

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>$&nbsp;<?=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.

2
  • 3
    wikipedia: El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS). Commented el 3 jul. 2019 a las 16:33
  • Como bien dice @ChristianCarrillo los ID´s deben ser unicos, si lo que deseas es usar esa funcionalidad para varios elementos, entonces utiliza una clase
    – Arreguin92
    Commented el 3 jul. 2019 a las 18:53

1 respuesta 1

1

En lugar de utilizar el identificador por id mejor utilizálo por medio de class

document.getElementById('tiempoMesa').innerHTML = result;

Con eso no importa la cantidad de elementos que esta creando ya que lo tomara en cuanta por medio de la clase tomando en cuenta el padre y con querySelectorAll recorres a todos los hijos que tengan la misma clase

  var x = document.getElementById("allElemets").querySelectorAll(".tiempoMesaClass")

Despues con un for agregas a cada uno de los elementos Recuerda que el for tomara el el numero de elementos que encuentre

for (i = 0; i < x.length; i++) {

despues la posicion del contador con innerHTML le asignas lo de result

document.getElementsByClassName("tiempoMesaClass")[i].innerHTML= result;

Quedaria algo asi:

/*===========================================================
=            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());

    var x = document.getElementById("allElemets").querySelectorAll(".tiempoMesaClass");
var i;
for (i = 0; i < x.length; i++) {
document.getElementsByClassName("tiempoMesaClass")[i].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  ======*/
<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 id="allElemets" 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>$&nbsp;<?=number_format($row['total'])?></p>
      <p><?=$row['responsable']?></p>
      <p id='tiempoMesa' class='tiempoMesaClass'>00:00:00</p>
      <p id='tiempoMesa' class='tiempoMesaClass'>00:00:00</p>
      <p id='tiempoMesa' class='tiempoMesaClass'>00:00:00</p>
      <p id='tiempoMesa' class='tiempoMesaClass'>00:00:00</p>
      <p id='tiempoMesa' class='tiempoMesaClass'>00:00:00</p>
      <p id='tiempoMesa' class='tiempoMesaClass'>00:00:00</p>
    </a>
  </div> 
  <?
} }

?>


</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.