0

lo que estoy haciendo es crear un array e ir agregando los elementos al hacer click en el botón, lo q esta pasando es que el array se esta llenando solo cuando hago click pero si después (fuera del evento click) quiero recorrerlo y mostrarlo no contiene nada por lo visto, hay una forma de que se guarden igual los elementos así después los puedo mostrar fuera del evento click?

let elementos = 0;
let array =[];

  //lleno el array
 $('.btn').on('click' ,function(){

    $(".array").text(array.push(elementos++))
    console.log(array)
 })

//muestro el array q estoy obteniendo
console.log('array obtenido: ');
array.forEach(function(e, index) {
    console.log(`${index} : ${e}`);
    $(".array").append(`<li>${index} : ${e}</li>`);
});
<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>

 <input type="button" class="btn" style="cursor: pointer;" value="cargar array">

 <p class="array"></p>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript" src="app.js"></script>

</body>
</html>

1 respuesta 1

2

Tu error es que estás recorriendo el array únicamente al cargar la página, evidentemente este estará vacío, no sé muy bien que quieres lograr, pero puedes añadir el elemento al array y luego mostrar el array con una función al dar click a un elemento

let elementos = 0;
let array = [];

$('.btn').on('click', function() {
    $(".array").text(array.push(elementos++));
    console.log(array);
});

$(".showArray").on("click", function() {
    console.log('array obtenido: ');
    array.forEach(function(e, index) {
        console.log(`${index} : ${e}`);
        $(".array").append(`<li>${index} : ${e}</li>`);
    });
});
<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <body>
      <input type="button" class="btn" style="cursor: pointer;" value="cargar array">
      <input type="button" class="showArray" style="cursor: pointer;" value="ver array">
      <p class="array"></p>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script type="text/javascript" src="app.js"></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.