0

Buenas noches soy algo nuevo en javascript y me gustaria que me pudieran ayudar por favor estoy creando un pequeño ejemplo de practica donde tengo un boton que cada vez que yo de click me deberia de mostrar los numeros del 1 al 100 pero por algun motivo no cambia mi ciclo foreach solo me imprime el numero 100, por que sucede esto?

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function Incrementar(){
            let Nums = 100;
            let GuardarValor;
            for(var i = 0; i <= Nums; i++){
               document.getElementById('Numeros').innerText = i;
            }
        }
    </script>
</head>
<body>
    <main>
        <h1>COUNTER</h1>
        <label id="Numeros"></label>
        <br>
        <button onclick="Incrementar()">Incrementar</button>
    </main>
</body>
</html>
3
  • Cambia esto: document.getElementById('Numeros').innerText = i; por esto: document.getElementById('Numeros').innerText += i; (fíjate que el único cambio es el = por += para que concatene los resultados de cada ciclo... ¿es eso lo que pretendes? Piensa que del otro modo también está funcionando, pero va tan rápido que solo ves la última asignación que haces, que es cuando llega al 100. Si lo que quieres es que vaya más poco a poco usa setTimeOut() o setInterval()
    – masterguru
    Commented el 20 oct. 2022 a las 4:35
  • reemplaza document.getElementById('Numeros').innerText = i por document.getElementById('Numeros').innerText += (i + ' '); Commented el 20 oct. 2022 a las 4:45
  • relacionada: es.stackoverflow.com/questions/228012/… Commented el 20 oct. 2022 a las 7:19

2 respuestas 2

0

Por si acaso, pues no me ha quedado claro en tu pregunta, te dejo lo que sería una solución (la puedes ejecutar aquí mismo para comprobar su funcionamiento) en caso de que prefieras ir viendo los números en el mismo lugar pero más poco a poco en lugar de concatenarlos:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      var i = 1; //  inicializamos el contador en 1

      function Incrementar() { //  creamos una función recursiva
        setTimeout(function() { //  hacemos una pausa de 300ms cada vez que se invoca la funcíón
          document.getElementById('Numeros').innerText = i  // cambiamos el valor
          i++; //  incrementamos el contador
          if (i <= 100) { //  si el contador es menor de 100 volvemos a llamar a la función
            Incrementar(); // llamamos de nuevo a la función
          }
        }, 300)  // cantidad de milisegundos a esperar
      }

    </script>
  </head>

  <body>
    <main>
      <h1>COUNTER</h1>
      <label id="Numeros"></label>
      <br>
      <button onclick="Incrementar()">Incrementar</button>
    </main>
  </body>

</html>

La explicación la encontrarás en los comentarios de la función, donde verás que se trata de una función recursiva en lugar de un bucle, para poder implementar mejor el método setTimeOut() que ya te habia avanzado en los comentarios.

0

El problema es que el innerText sobreescribe el contenido, por lo que realmente se están imprimiendo los 100 números, solo que lo hace muy rápido quedando solo impreso finalmente el último número.

Lo que se podría hacer por ejemplo es cuando se hace el innerText = reemplazarlo por innerText +=. Esto lo que haría es agregarle el nuevo valor al contenido que ya tiene.

a += b para este contexto da el mismo resultado que a = a + b. En este caso a sería innerText y b sería el valor a agregar.

Agregué también un salto de línea para que quede un número debajo del otro.

El código quedaría algo así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      function Incrementar() {
        let Nums = 100;
        let GuardarValor;
        for (var i = 0; i <= Nums; i++) {
          document.getElementById("Numeros").innerText += i + "\n";
        }
      }
    </script>
  </head>
  <body>
    <main>
      <h1>COUNTER</h1>
      <label id="Numeros"></label>
      <br />
      <button onclick="Incrementar()">Incrementar</button>
    </main>
  </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.