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.
var numero2 = tiempo.innerHTML; if (numero == "00:00:00" < numero2) {