How to change color input when changing its value in JAVASCRIPT

Navigation
0

I have a function in javascript that counts characters and I would like to change the color of the input text when its value drops from, for example, the 1200 characters.

This took me for the moment: 

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>

At the moment it works until the first change, when it descends of the 1200 characters, but it does not take it when it descends of the 1000, there it would have to change to red color, the text of the input. What could I have done wrong?

    
asked by M4uriXD 20.11.2018 в 15:00
source

2 answers

5

You have the ifs reversed, that is, 1000 is smaller than 1200 and your first if is 1200. Therefore, it never goes lower.

If you change the first if by comparing the 1000 characters and then you put the else if the 1200 works perfectly. 

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>
    
answered by 20.11.2018 / 15:06
source
0

The problem is that you are executing in the first if a condition that is also going to be met when it is less than 1000, so you should change the order of 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>
    
answered by 20.11.2018 в 15:09
How to print some characters from the Ascii table? Java POO Crashea program from nowhere C ++ [closed]