0

El motivo de no modificar el html es porque itento modificar un sitio web de mi trabajo para que cambie de color siertas zonas al generarse/aparecer un numero en especifico usando snippet. El codigo no refleja eso simplemente porque no logre avanzar, ya que no encuentro la forma de obtener unicamente el numero del div usando querySelectorAll sin moficar el html ¿Es posible siquiera?

<div class="cajas">5</div>
<div class="cajas">2</div>
<div class="cajas">10</div>
<div class="cajas">6</div>
var caja = document.querySelectorAll(".cajas")

if (caja < 10) {
  console.log("El número es menor a 10");
} else {
  console.log("El número es igual o mayor a 10");
}

3 respuestas 3

2

querySelectorAll devuelve una lista de elementos, por lo que debes recorrerla usando un bucle, for...of o forEach

var cajas = document.querySelectorAll(".cajas");

  for (var caja of cajas) {
}

Al buscar los elementos, document.querySelectorAll(".cajas") devuelve una string al acceder al contenido del elemento HTML, ya sea textContent o innerHTML. Dado que se trata de números, debes realizar la conversión de cadena a número.

var numero = parseInt(caja.textContent);

Usando la propiedad .style de JavaScript, puedes modificar los estilos CSS del elemento HTML.

caja.style.backgroundColor = "#E4BC24";

código completo"

var cajas = document.querySelectorAll(".cajas");

  for (var caja of cajas) {
    var numero = parseInt(caja.innerHTML);

    if (numero < 10) {
      caja.style.backgroundColor = "#E4BC24";  
      
    } else {
      caja.style.backgroundColor = "#EC8C04"; 
       
    }
  }
 <div class="cajas">5</div>
 <div class="cajas">2</div>
 <div class="cajas">22</div>
 <div class="cajas">6</div>

2

Cuando usas querySelectorAll estás seleccionando todos los elementos que tienen esa clase, id, nombre, etc (dependiendo de si usas ".", "#", etc para realizar el query).

Query selector all devuelve un array con los elementos que encuentra que cumplen la condición.

Para comprobar cada uno de los elementos, al ser un array tendrás que utilizar la función forEach.

Un ejemplo seria

var cajas = document.querySelectorAll(".cajas");

cajas.forEach(function (caja) {
    console.log(caja.innerHTML);
});

Este ejemplo imprime el contenido html del elemento. En el ejemplo que has puesto, imprimiria por consola lo siguiente:

5 2 10 6

Una vez ya teniendo el valor, puedes hacer las comprobaciones que necesites y en función de esas comprobaciones modificar el elemento de la manera que desees.

2

En principio no te da resultado porque nunca recorres la lista de elementos que devuelve querySelectorAll, esta obtiene todos los elementos con clase cajas. Segundo, tampoco accedes a las propiedades de dicho elemento, que en este caso es textContent para modificar el estilo del contendió del div.

Seria algo como esto, donde cambiamos el color del texto del div con "10" a color azul:

//DETECTA CARGA DEL DOM
document.addEventListener('DOMContentLoaded', function() {
  //OBTENEMOS TODOS LOS ELEMENTOS CON CLASE CAJAS
  var divs = document.querySelectorAll('.cajas');

  //RECORREMOS LA LISTA DE ELEMENTOS
  divs.forEach(function(element) {
    //CONDICIONAL QUE VERIFICA CUAL DE LOS DIV TIENE DICHO VALOR
    if (element.textContent == "10") {
      //CAMBIAMOS EL COLOR DEL TEXTO DEL DIV CUANDO ES 10
      element.style.setProperty('color', 'blue');
    } else {

    }
  })
})
<div class="cajas">5</div>
<div class="cajas">2</div>
<div class="cajas">10</div>
<div class="cajas">6</div>

Dime si te sirvió.

Tu Respuesta

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

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