5

Estoy estudiando diseño de aplicaiones web y no consigo entenderme con javaScript por desgracia para mí. Mi problema es que no consigo dar solución a un ejercicio que nos ha puesto el profesor. El enunciado es el siguiente:

Realiza una página web que permita introducir una cadena de texto y al pulsar un boton devuelva haciendo uso de javascript una estadistica de las letras que aparecen en la cadena de texto y de cuantas veces aparece cada letra.

Me he vuelto loca buscando por internet alguna ayuda y no encuentro nada que me funcione. En HTML que he creado es el siguiente.

  <div id="content">
    <h2>Introduce un texto en el campo y pulsa el botón para contar las letras</h2>
    <input type="text" id="texto" size="70" name="texto" value="">
    <input type="button" id="boton" name="boton" value="Cuenta las letras">
    <input type="button" id="boton2" name="boton" value="Borrar">
  </div>

  <div id="resultado"></div>
  <div id="resultado2"></div>
  <div id="resultado3"></div>

Un input donde el usuario introduce la cadena de texto de la cual haremos la estadistica de cada letra usada.

El javaScript lo tengo planteado de esta manera, pero no sé si es la correcta o me he complicado yo sola. Porque no necesito que sea comlicado solo que me funcione.

window.onload = function(){
//Dejamos al botón esperando por un click para que haga su trabajo
  var boton = document.getElementById("boton");
  boton.addEventListener("click", contar, false);

  function contar(){
    var textointro = introducido();

    console.log(textointro);

//Mostramos lo que el  usuario ha escrito en el input
    document.getElementById('resultado').innerHTML = "Has escrito:" + "<br>" + textointro;

//Nos aseguramos que no puedan poner solo espacios en blanco o números
    if (textoIntroducido === "" || !isNaN(textoIntroducido)) {
      document.getElementById('resultado2').innerHTML = "Has introducido espacios en blanco o números, por favor escribe letras solamente"
    }//Cierre del IF
  }//Cierre de la FUNCION CONTAR

    var alfabeto = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","ñ","o","p","q","r","s","t","u","v","w","x","y","z"];
    console.log(alfabeto);

    var contador = 0;
    var letraCantidad = new Array();

    for(i=0; i=letraCantidad.length; i++){
    }

    function introducido(){
//Recogemos el valor del input para ver que ha introducido el usuario
    textoIntroducido = document.getElementById("texto").value;

//Convertimos las letras a minusculas para poder contarlas
    var introMinus = textoIntroducido.toLowerCase();
    introMinus = introMinus.replace(/\s/g, "");
    console.log(introMinus);

    return textoIntroducido;
  }//Cierre FUNCION INTRODUCIDO

//Dejamos al botón BORRAR esperando por el click para borrar el input
  var boton2 = document.getElementById('boton2');
  boton2.addEventListener("click", borrar, false);
  function borrar() {
    document.getElementById('texto').value = "";
  }

}//Cierre del WINDOW:ONLOAD

Disculpad mi exceso de comentarios, pero sino lo hago termino mas perdida que Wally.

Muchas gracias por la ayuda y disculpad si estoy repitiendo alguna preguntaque otro usuario haya podido hacer, pero en las que he visto no he podido conseguir el resultado deseado.

Un saludo

1

2 respuestas 2

6

Te dejo un ejemplo documentado, modificalo a tus necesidades.

Anexo toLowerCase() la recomendación de Pablo Lozano

function contar() {
  // Capturas el valor del input, lo limpas de espacios al inicio y al final y luego haces un arreglo
  const texto = document.getElementById('texto').
  value.trim().toLowerCase().split('');
  
  // Creamos un objeto que será el que almacene las repeticiones
  const repeticiones = {};
  
  // Ciclamos el texto del input y verificamos si existe y sumamos 1, de no existir siempre valdrá 1
  texto.forEach( ( letra ) => {
    repeticiones[ letra ] = ( repeticiones[ letra ] || 0 ) + 1;
  });
  
  // Ahora ciclamos el objeto y lo agregamos al resultado
  for( let letra in repeticiones ) {
    const text = `${ letra } = ${ repeticiones[ letra ] }<br>`;
    document.getElementById('resultado').innerHTML += text;
  }


}
<input type="text" id="texto">
<button type="button" id="boton" onclick="contar()">Verificar</button>

<div id="resultado"></div>

1
  • 2
    Recomendaría hacer un toLowercase() del texto, para no contar por separado "a" y "A" Commented el 10 dic. 2019 a las 9:43
3

Primeramente, almacena en un array 'cadena' el texto escrito en el campo 'texto', descompuesto en un array mediante la funcion split().

Luego te creas un objeto llamado 'contador' que irá contando las apariciones de cada uno de los caracteres del texto escrito.

Mediante un forEach() recorre 'cadena' y verifica si existe ese caracter en el objeto 'contador'. Si NO existe, crea esa CLAVE con el valor 1. Si YA existe, incrementa su valor en 1.

Finalmente, mediante for() recorre el objeto 'contador' y ve concatenando en una lista desordenada la CLAVE y VALOR de cada elemento de 'contador'.

Espero sirva el código para aprender programación en Javascript.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript ANALISIS</h2>
<div id="content">
    <label>Introduce un texto en el campo y pulsa el botón para contar las letras</label>
    <input type="text" id="texto" size="70" name="texto" value="Como te va mi amor? Como te va?">
    <input type="button" id="boton" name="boton" value="Cuenta las letras" onclick="cuenta('texto')">
    <input type="button" id="boton2" name="boton" value="Borrar" onclick="borra('texto')">
</div>
<div id="resultado" style="border: 1px solid red"></div>
<script>
function cuenta(texto) {
    var mensaje = document.getElementById(texto).value;
    var cadena = mensaje.split('');
    var contador = {};
    cadena.forEach(function(valor) {
        if (contador[valor] === undefined) {contador[valor] = 1} else {contador[valor] += 1}
    });
    document.getElementById('resultado').innerHTML = '<ul>';
    for (var clave in contador) {
        document.getElementById('resultado').innerHTML += '<li>' + clave + ':' + contador[clave] + '</li>';
    }
    document.getElementById('resultado').innerHTML += '<ul>';
}
function borra(texto) {
    document.getElementById(texto).value = '';
    document.getElementById('resultado').innerHTML = '';
}
</script>
</body>
</html>

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.