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>