Character length calculation in javascript conditions

0

Hello, good afternoon, I have this problem in javascript:

I have an advance in which this javascript tells you through a text box, how many characters and words you write and sends it on a screen, but I require this to be done with a menu, where the user types a message and have the following conditions:

If the message or string written in the text box is less than 10 characters and any word (s) printed on the screen is a short string.

If the message or string written in the text box is greater than 10 characters and less than 20 characters, any word (s) that print on the screen is medium string.

If the message or string written in the text box is greater than 20 characters and any word (s) printed on the screen is a long string.

But I do not know how to put these conditions with what I have, please help me, thank you.

<html>
<head>
<title>Caracteres</title>
<meta charset="utf-8">
<style type="text/css">
    body    {
background-color:#DBDFDB; 
    }
</style>
</head>
<body>
<font color="#030303" face="georgia" size="5"> 
<center>
    <TABLE BORDER=3 width="1000" height="50">
    <TR><TD>
        <font face="georgia" size="30">
    <MARQUEE SCROLLAMOUNT=10 BEHAVIOR="alternate"><b>Programa para calcular caracteres</b></MARQUEE>
    </font>
    </TD></TR>
    </TABLE>
<p>Menu: </p>
<p>1 a 10 Es una cadena corta</p>
<p>10 a 20 Es una cadena media</p>
<p>Mayores a 20 Es una cadena larga</p>

<script type="text/javascript">
function wordCount() {
  textoArea = document.getElementById("area").value;
  numeroCaracteres = textoArea.length;
  inicioBlanco = /^ /
  finBlanco = / $/  
  variosBlancos = /[ ]+/g 
  textoArea = textoArea.replace(inicioBlanco,"");
  textoArea = textoArea.replace(finBlanco,"");
  textoArea = textoArea.replace(variosBlancos," ");  
  textoAreaDividido = textoArea.split(" ");
  numeroPalabras = textoAreaDividido.length;
  tC = (numeroCaracteres==1)?" carácter":" caracteres";
  tP = (numeroPalabras==1)?" palabra":" palabras";
  alert (numeroCaracteres + tC +"\n" + numeroPalabras + tP);
 }
</script>

<FORM ID="formulario" ACTION="#">
<TEXTAREA ID="area" COLS=20 ROWS=10>
Texto dentro del área de texto </TEXTAREA><BR>
<INPUT TYPE="button" VALUE="Contar las palabras" onClick="wordCount();">
</FORM>

</center>
</font>
</body>
</html>
    
asked by Graffters Skates 14.10.2017 в 22:54
source

1 answer

0

Well the solution I have in this code, try to do this

Count the characters that you are entering in each input recover the value and pass it through a condition and define the message as I leave it in the working example

function contadorcaracteres(){
    
			        var numeroCaracteres = 0;
			        var textoArea = $('#nombre').val();
			        numeroCaracteres = textoArea.length;
              
              if(numeroCaracteres == 10){
                $('#open').text('Son 10 caracteres');
                otroinput();
              }
}
function contadorcaracteres1(){
    
			        var numeroCaracteres1 = 0;
			        var textoArea1 = $('#nombre1').val();
			        numeroCaracteres1 = textoArea1.length;
              
              if(numeroCaracteres1 == 20){
                $('#open').text('Son 20 caracteres');
                otroinput2();
              }
}
function contadorcaracteres2(){
    
			        var numeroCaracteres2 = 0;
			        var textoArea2 = $('#nombre2').val();
			        numeroCaracteres2 = textoArea2.length;
              
              if(numeroCaracteres2 == 30){
                $('#open').text('Son 30 caracteres');
                otroinput3();
              }
}
function otroinput(){
  $('#primerinput1').show(600);

}


function otroinput2(){
  $('#primerinput2').show(600);

}

function otroinput3(){
  $('#primerinput3').show(600)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <label>Numero de caracteres que no sean mas de 10</label>
  <input type='text' name='nombre' id='nombre' onkeypress = 'contadorcaracteres()'>


<div style='display:none;' id='primerinput1'>
  <label>Numero de caracteres que sean mas de 10 y menos de 20</label>
  <input type='text' name='nombre1' id='nombre1' onkeypress = 'contadorcaracteres1()'>
</div>
<div style='display:none;' id='primerinput2'>
  <label>Numero de caracteres que sean mas de 20 y menos de 30</label>
  <input type='text' name='nombre' id='nombre2' onkeypress = 'contadorcaracteres2()'>
</div>
<div style='display:none;' id='primerinput3'>Finalizado el test de los input</div>
<div id='open'></div>

Remember to install the necessary libraries so that jquery can work together with javascript

e modified the code so you can see how it works when you force people to write,

  • Write the first 10 characters if you do not write it, it will not let you see the others impute
answered by 14.10.2017 в 23:26