Tengo una funcion en javascript que cuenta caracteres y quisiera cambiar el color del texto del input cuando su valor desciende de por ejemplo, los 1200 caracteres.
Esto llevo de momento:
function ocultarContador(){
document.getElementById('ocultar').style.display = 'none';
}
function mostrarContador(){
document.getElementById('ocultar').style.display = 'inline-block';
}
/*_CONTADOR DE CARACTERES_*/
function cuenta(){
var max = "1500";
var cadena = document.getElementById("com").value;
var longitud = cadena.length;
if(longitud <= max){
document.getElementById("contador").value = max-longitud;
} else {
document.getElementById("com").value = cadena.substr(0, max);
}
if (document.getElementById("contador").value < 1200) {
document.getElementById("contador").style.color = "orange";
}
else if (document.getElementById("contador").value <= 1000) {
document.getElementById("contador").style.color = "red";
}
}
.ocultar{
display: none;
}
.ocultar input{
border-style: none;
background-color: rgba(250,250,250,0.1);
}
<div class="form-group">
<label>¿En qué podemos ayudarte?</label>
<br><br>
<textarea cols="30" rows="10" name="comment" class="form-control" id="com" placeholder="Ingrese su mensaje aquí..." required="required" maxlength="1500" onfocus="mostrarContador(this)" onblur="ocultarContador(this)" onkeyup="cuenta()" onkeydown="cuenta()" title="Completa este campo"></textarea>
<div id="ocultar" class="ocultar">
<label style="color: black; font-size: 14px;">Caracteres Restantes: </label>
<input disabled="disabled" maxlength="3" value="1500" id="contador">
</div>
</div>
De momento funciona hasta el primer cambio, cuando desciende de los 1200 caracteres, pero no lo toma cuando desciende de los 1000, ahí debería cambiar a color rojo, el texto del input. ¿Que podré haber hecho mal?