1

Hace poco me ayudaron con el querySelectorAll para obtener el número de un div. Ahora tengo una última traba en mi código: cuando intento hacer que solo me cambie de color cuando obtengo "0" en la primera clase de div y "00:00:00" en la segunda clase de div, resulta que cualquier número que acabe en "00:..." cambia de color. Entiendo que es porque una vez que aparece el símbolo ":" ya no se toma en cuenta el resto. Lo mas cercano que encontré para solucionar el problema es Números y fechas, pero no termino de entender cómo usarlo en el siguiente código:

   setInterval(function() {
    var cajas = document.querySelectorAll(".cajas");
    var tiempos = document.querySelectorAll(".tiempos");
      for (var caja of cajas) {
          var numero = parseInt(caja.innerHTML);
      for (var tiempo of tiempos) {
          var numero2 = parseInt(tiempo.innerHTML);
        if (numero == 0 + 1 < numero2) { 
          caja.style.backgroundColor = "#E4BC24";  
          tiempo.style.backgroundColor = "#E4BC24"; 
        } else {
          caja.style.backgroundColor = "none"; 
          tiempo.style.backgroundColor = "none";
        }
      }
      }
    }, 1000);
<div class="cajas">0</div>
<div class="cajas">10</div>
<div class="cajas">19</div>
<div class="cajas">6</div>

<div class="tiempos">00:00:00</div>       
<div class="tiempos">15:00:00</div>
<div class="tiempos">00:15:00</div>
<div class="tiempos">00:00:15</div>
 

Lo que intento hacer es que solamente cuando las cajas dan valor 0 y el tiempo da valor 00:00:00 cambien de color, pero ambas deben dar ese resultado para que cambien de color, y no solo 1 de los de los 2 como me está ocurriendo. El div no se puede modificar ya que es un sitio web laboral, el cual solo puedo usar snippets.

1
  • 1
    Si realmente el tiempo dentro de las div's no necesita pasar por ningún procedimiento en tu código, puedes tomar la div sin necesidad de convertirla, ya que la conversión parseInt(tiempo.innerHTML) solo devuelve el primer "0". El "tiempo.innerHTML" en su forma pura se puede comparar y sin modificar mucho tu código. var numero2 = tiempo.innerHTML; if (numero == "00:00:00" < numero2) { Commented el 24 sept. 2023 a las 13:42

1 respuesta 1

1

Lo que intento hacer es que solamente cuando las cajas dan valor 0 y el tiempo da valor 00:00:00 cambien de color, pero ambas deben dar ese resultado para que cambien de color

Para empezar, en este momento iteras sobre cada caja, y en cada una sobre cada tiempo. Si tú quieres que cambien de color juntas yo me imagino que las cajas y los tiempos se relacionan entre sí, y no todas las cajas con todos los tiempos.

Mucho ojo. Tienes una condición

   if (numero == 0 + 1 < numero2) 

Que no hace lo que tú crees que hace. Esa comparación se evalúa como

   (0 + 1 < numero2)   TRUE si numero2 es mayor que 1

Por tanto

   numero == (0 + 1 < numero2) 

es TRUE si numero es distinto de cero y numero2 es mayor que 1

Pero como estás iterando sobre cada caja, y para cada una sobre todos los tiempos, el último tiempo del bucle condiciona el color de cada caja (porque si no es 00:00:00 entra en el else y pisa el color que pudiera haber dejado un tiempo anterior`).

De la misma manera, la última caja condiciona el valor de cada uno de los tiemspo, reseteando lo que hayan podido fijar las demás.


En el siguiente ejemplo agrupe cada par caja-tiempo dentro de un div con clase "grupo". Al iterar sobre cada grupo calculo los segundos expresados por la hora:

let [hora, minutos, segundos] = tiempo.split(':'];

segundos=Number(segundos) + Number(minutos)*60 + Number(hora)*3600

Y luego pinto de bermellón (o damasco) sólo los pares con caja 0 y segundos 0.

setInterval(() => {
    let cajas = document.querySelectorAll(".cajas");

    let grupos = Array.from(document.querySelectorAll('.grupo'));


    for (let grupo of grupos) {
      let caja = grupo.querySelector('.cajas'),
        tiempo = grupo.querySelector('.tiempos'),
        caja_valor = parseInt(caja.innerHTML, 10),
        [hora, minutos, segundos] = tiempo.innerHTML.split(':');

      segundos = Number(segundos) + Number(minutos) * 60 + Number(hora) * 3600;

      if (caja_valor === 0 && segundos === 0) {
        caja.style.backgroundColor = "#E4BC24";
        tiempo.style.backgroundColor = "#E4BC24";


      } else {
        caja.style.backgroundColor = "none";
        tiempo.style.backgroundColor = "none";
      }
    }

  },
  1000);
.cajas {
  width: 100px;
}

.tiempos {
  width: 150px;
}
<div class="grupo" style="display:flex">
  <div class="cajas">0</div>
  <div class="tiempos">00:00:00</div>
</div>
<div class="grupo" style="display:flex">
  <div class="cajas">10</div>
  <div class="tiempos">15:00:00</div>
</div>
<div class="grupo" style="display:flex">
  <div class="cajas">19</div>
  <div class="tiempos">00:15:00</div>
</div>
<div class="grupo" style="display:flex">
  <div class="cajas">6</div>
  <div class="tiempos">00:00:15</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.