0

Buen día, tengo una cuestión que no entiendo, se trata de un ejercicio en el cual el usuario debe ingresar una frase y un carácter, el script debe contar cuántas veces se repite dicho carácter en la frase; lo realicé capturando los datos con prompt y funciona bien:

<script>

var str = prompt("Escribe una frase"), caracter = prompt("Escribe un caracter"), coincidencias = contar(str, caracter);

function contar(str, caracter){
  var indices = [];
  for (var i = 0; i < str.length; i ++){
    if(str[i].toLowerCase()=== caracter) indices.push(i);
  }
return indices.length;
}

window.alert(coincidencias);

</script>

Ahora bien, cuando trato de trabajarlo para que reciba los datos a través de input y me muestre el resultado en un párrafo, no funciona. estoy tratando de aprender y agradeceré enormemente a cualquier persona que me pueda explicar la diferencia y el porqué; esto es lo que modifiqué:

<!DOCTYPE html>
<html lang="es"
 <form>
        <input type="text" id="frase" placeholder="ingrese una frase"><br><br>
        <input type="text" id="caract" placeholder="ingrese un caracter"><br><br>

        <button type="button" id="btn" onclick="contar()" >Submit</button>

        <p id="resultado"></p>

    </form>

<sript>
var str = document.getElementById("frase").value;
var caracter = document.getElementById("caract").value;
var coincidencias = contar();

function contar(str, caracter){
  var indices = [];
  for (var i = 0; i < str.length; i ++){
    if(str[i].toLowerCase()=== caracter) indices.push(i);
  }
return indices.length;
}

document.getElementsById("resultado").innerHTML = coincidencias;

</sript>
</body>

6 respuestas 6

2

Cuando haces el llamado a la función contar en el evento onclick no estás pasando los mismos parámetros que definiste en la función. Tu función original espera como primer parámetro un str y un caracter, y dentro de la función utilizas los parámetros que jamas has pasado.

Lo otro es que en esta línea

var coincidencias = contar();

Justo después de la carga de la página estarías contando lo que tienes en tus inputs, por lo que al principio al no tener ningún valor siempre te daría 0 el valor de coincidencias (Suponiendo que definiste y llamaste correctamente tu función).

Lo más sencillo que puedes hacer es asignar de inmediato el cálculo de las repeticiones a tu ID resultado y leer mientras ejecutas la función los valores de los inputs donde tienes la cadena original y el caracter a analizar, coincidencias leerás su valor inicial y ese será el valor con el cual vas a operar siempre la función, o sea string vacío.

Con todas estas anotaciones te propongo una corrección a tus problemas, cualquier duda quedo atento.

<!DOCTYPE html>
<html lang="es"
 <form>
        <input type="text" id="frase" placeholder="ingrese una frase"><br><br>
        <input type="text" id="caract" placeholder="ingrese un caracter"><br><br>

        <button type="button" id="btn" onclick="contar()" >Submit</button>

        <p id="resultado"></p>

    </form>

<script>
  
function contar(){
  var str = document.getElementById("frase").value;
  var caracter = document.getElementById("caract").value;
  var indices = [];
  
  for (var i = 0; i < str.length; i++){
    if(str[i].toLowerCase() === caracter) indices.push(i);
  }

  document.getElementById("resultado").innerHTML = indices.length;
}


</script>
</body>

1
  • Muchas gracias, me sirvió mucho tu explicación. saludos
    – luz
    el 25 oct. 2019 a las 16:36
2

El principal problema es que al obtener el value de los inputs, estos están vacíos, los tendrías que mover dentro de la función.

<!DOCTYPE html>
<html lang="es" <form>
<input type="text" id="frase" placeholder="ingrese una frase"><br><br>
<input type="text" id="caract" placeholder="ingrese un caracter"><br><br>
<button type="button" id="btn" onclick="contar()">Submit</button>
<p id="resultado"></p>
</form>
<script>
  function contar(str, caracter) {
    var str = document.getElementById("frase").value;
    var caracter = document.getElementById("caract").value;

    let r = new RegExp(caracter, "g");
    let match = str.match(r);
    let repeticiones = (match) ? match.length : 0;

    document.getElementById("resultado").innerHTML = repeticiones;
  }
</script>
</body>

De paso, podrías también usar .match() porque podrías encontrar las conincidencias de cualquier cadena, no solo un caracter.

1

Tienes 2 errores:

  • Estás definiendo los valores fuera de la función lo que hace que estés pasando 0 como parámetros a la función contar().
  • Se te fue una S en document.getElementById('resultado').

//var coincidencias = contar();
function contar(str, caracter){

var str = document.getElementById("frase").value;
var caracter = document.getElementById("caract").value;

  var indices = [];
  
  //console.log(str);
  
  for (var i = 0; i < str.length; i ++){
    if(str[i].toLowerCase() === caracter) indices.push(i);
  }

document.getElementById("resultado").innerHTML = indices.length;

}
<form>
        <input type="text" id="frase" placeholder="ingrese una frase"><br><br>
        <input type="text" id="caract" placeholder="ingrese un caracter"><br><br>

        <button type="button" id="btn" onclick="contar()" >Submit</button>

        <p id="resultado"></p>

    </form>

1

Los errores en tu código son debidos a que no pones cada cosa en su contexto.

Si los cálculos deben ocurrir dentro de contar() entonces puedes tomar dentro de la función los valores actuales de cada input y modificar allí mismo el valor del input del resultado.

La práctica implementada aquí consiste en:

  1. Crear fuera de la función referencias a los elementos. Esto evitará tener que estar llamando constantemente a document.getElementById sobre todo si vas a usar esos en diferentes funciones.

  2. Usar esas referencias dentro de la función para obtener los valores y/o cambiar el contenido.

var elFrase = document.getElementById("frase");
var elChar = document.getElementById("caract");
var elResult = document.getElementById("resultado");

function contar() {
  var str = elFrase.value;
  var caracter = elChar.value;
  var indices = [];
  for (var i = 0; i < str.length; i++) {
    if (str[i].toLowerCase() === caracter) indices.push(i);
  }
  elResult.innerHTML = indices.length;
}
<form>
  <input type="text" id="frase" placeholder="ingrese una frase"><br><br>
  <input type="text" id="caract" placeholder="ingrese un caracter"><br><br>

  <button type="button" id="btn" onclick="contar()">Submit</button>

  <p id="resultado"></p>

</form>

1
  • Muchas gracias por tu explicación, se ve que eres un buen maestro. jeje, saludos
    – luz
    el 25 oct. 2019 a las 16:39
1

Tienes muchos errores pero con este código lo resolveras por lo general todo fue palabras mal colocadas

<!DOCTYPE html>
<html lang="es"
    <head>

    </head>
    <body>
 <form>
        <input type="text" id="frase" placeholder="ingrese una frase"><br><br>
        <input type="text" id="caract" placeholder="ingrese un caracter"><br><br>

        <button type="button" id="btn" onclick="contar()" >Submit</button>

        <p id="resultado"></p>

    </form>
 <script>
function contar() {
        var str = document.getElementById("frase").value;
        var caracter = document.getElementById("caract").value;

        var indices = [];
        for (var i = 0; i < str.length ; i++) {
            if (str[i].toLowerCase() === caracter) indices.push(i);
        }
        var coincidencias = indices.length.toString();

        document.getElementById("resultado").innerHTML = coincidencias;
    }
</script>



</body>
    </html>
1
  1. Estas llamando la funcion contar sin que el usuario pulse en el boton y ademas sin los parametros.
  2. str y caracter al inicio estas vacios.
  3. str.length de error porque str no esta definido.
  4. Tu etiqueta script esta mal escrita o al menos en el fragmento de código que has publicado.
  5. Es getElementById en vez de getElementsById porque el id es único en teoría.

Con un par de cambios tu código quedaría de la siguiente manera:

<!DOCTYPE html>
<html lang="es"
 <form>
        <input type="text" id="frase" placeholder="ingrese una frase"><br/><br/>
        <input type="text" id="caract" placeholder="ingrese un caracter"><br/><br/>

        <button type="button" id="btn" onclick="contar()" >Submit</button>

        <p id="resultado"></p>

    </form>

<script>


function contar(){
 var str = document.getElementById("frase").value;
 var caracter = document.getElementById("caract").value;
  var indices = [i];

  for (var i = 0; i < str.length; i ++){
    if(str[i].toLowerCase()=== caracter) indices.push(i);
  }
document.getElementById("resultado").innerHTML =  indices.length -1 ;
}

</script>
  
  

</body>

Lo que haces es ejecutar la función contar solo cuando el usuario pulse el boton Submit y entonces empiezas a procesar los datos.

Te dejo también un ejemplo de como sería utilizando el método forEach aun que se puede hacer de muchas maneras

function contar(){
  let total = 0;
  let str = "Esta es mi cadena de texto"
  let caracter = 'e'
 
  Array.from(str).forEach(function(char){
    if(char.toLowerCase() === caracter.toLowerCase()) {
      total +=1
    }
  })
  console.log(`Total caracteres de ${caracter}: ${total}`)
 
}

contar()

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.