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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.