[ Foro de Javascript ]

Si los elementos son mayores a 4, cambian su background

<div class="comment">

<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
<div class="text">4</div>
<div class="text">5</div>
<div class="text">6</div>
<div class="text">7</div>

</div>




He seleccionado todos los elementos de mi página que tienen la clase ".text" y les he cambiado el background a color rojo.
Me gustaría conseguir que todos los elementos ".text" que sean mayores o iguales a 4 tuviesen un background de color amarillo. He intentado lograrlo con la siguiente función pero sólo he conseguido cambiar todos a color rojo. ¿Alguien me dice qué estoy haciendo mal o me echa una mano?
Me gustaría que la segunda parte del script (A partir de "if( x[i] >=4..." pudiese reconocer cuáles de los div enumerados son mayores a 4 y les cambie el background). ¿Alguien me ayuda?




]<script>
var x = document.querySelectorAll(".comment .text");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";

}

if( x[i].innerHTML >=4){
x.style.backgroundColor = "yellow";
}

</script>