1

Hola buenas tardes tengo este problema en javascript:

Tengo un avance en el cual este javascript te dice a través de un cuadro de texto, cuántos caracteres y palabras escribes y lo manda en una pantalla, pero requiero que esto se haga con un menu, donde el usuario escriba un mensaje y tenga las siguientes condiciones:

Si el mensaje o cadena escrito en el cuadro de texto, es menor a 10 caracteres y cualquier palabra(s) que imprima en pantalla es cadena corta.

Si el mensaje o cadena escrito en el cuadro de texto, es mayor a 10 caracteres y menor a 20 caracteres, cualquier palabra(s) que imprima en pantalla es cadena media.

Si el mensaje o cadena escrito en el cuadro de texto, es mayor a 20 caracteres y cualquier palabra(s) que imprima en pantalla es cadena larga.

Pero no se como poner estas condiciones con lo que llevo, me ayudan por favor, mil gracias.

<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>
1
  • Edita la pregunta y añade el código, no lo añadas como comentarios Commented el 14 oct. 2017 a las 21:08

1 respuesta 1

1

Bueno la solución que tengo esta en este código, trata de hacer esto

Contar los caracteres que estas metiendo en cada input recuperar el valor y pasarlo por una condición y definir el mensaje como te lo dejo en el ejemplo funcionable

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>

Recuerda instalar las librerías necesarios para que jquery pueda funcionar junto con javascript

e modificado el codigo para que veas que funcionamiento tiene cuando obligas a las personas escribir,

  • Escribe los primero 10 caracteres si no los escribes no te dejara ver los demás impute
7
  • ok veo que funciona, pero por ejemplo como le podria hacer para que al usuario le solicite escribir y de ahi cuando termine, que aplique las condiciones que solicita el programa? Commented el 14 oct. 2017 a las 23:52
  • Hola, Puedes validar los input que sean obligatorios.
    – gama984
    Commented el 14 oct. 2017 a las 23:53
  • La otra que se me ocurre seria a travez de un prompt que el usuario escriba lo que sea y que cuando de en aceptar como resultado muestre depende las condiciones que puse pero no se como desarrollarlas =( Commented el 14 oct. 2017 a las 23:57
  • Me ayudan por favor Commented el 15 oct. 2017 a las 3:07
  • Ok, ahora edito mi ejemplo para quesea obligatorio la escritura.
    – gama984
    Commented el 15 oct. 2017 a las 3:11

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.