0

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:&nbsp;</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?

2 respuestas 2

5

Tienes los if invertidos, es decir, 1000 es más pequeño que 1200 y tu primer if es el de 1200. Por lo tanto nunca pasa más abajo.

Si cambias el primer if comparando los 1000 carácteres y depués pones el else if del 1200 funciona perfectamente.

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 < 1000) {

    document.getElementById("contador").style.color = "red";

  }
  else if (document.getElementById("contador").value <= 1200) {

    document.getElementById("contador").style.color = "orange";

  }
}
.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:&nbsp;</label>
	                            		<input disabled="disabled" maxlength="3" value="1500" id="contador">	
	                    			</div>
								</div>

1
  • Aah con que era eso, ya lo revise y funciona ahora, muchas gracias.
    – M4uriXD
    Commented el 20 nov. 2018 a las 14:08
0

El problema es que estás ejecutando en el primer if una condición que también se va a cumplir cuando es menor que 1000, por lo que deberís cambiar el orden de los if

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 <= 1000) {

      document.getElementById("contador").style.color = "red";
	            		
    }
    
    else if (document.getElementById("contador").value < 1200) {

      document.getElementById("contador").style.color = "orange";
	            	
    }
    
  }
.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:&nbsp;</label>
    <input disabled="disabled" maxlength="3" value="1500" id="contador">	
  </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.