javascript function events onclick click

Is it possible to use a variable I've got from an .onclick event function, and use it outside said event, in another part of the code?

I'm learning JavaScript, and I'm making a simple project where I have a form (with name, lastname, and age) and a button.

I want the user to fill the form, and press the button. After that I want to use the .onclick event to store all the info in an array. Then I want to create another button that when I pressed it shows a list of all the names, lastnames and ages from this array.

The problem is, the array I create inside the .onclick event function can't be used outside of said function. Am I doing something wrong or is it impossible to do that? Here's part of my code:

var input = document.getElementById("input"); //id of the button i want to press to fill my array
var ver = document.getElementById("ver"); //id of the button i want to press to show my array
var resultado = document.getElementById("resultado");
var i = 0;
var lista = new Array(100); //Array va con mayuscula!!!

input.onclick = function() {
  var listaFinal = CrearArreglo(lista, i);
  i++; //lo sumo aca porque sino en la funcion se pierde el valor
}

function CrearArreglo(miLista, j) {
  var nombre = document.getElementById("nombre").value;
  var apellido = document.getElementById("apellido").value;
  var edad = document.getElementById("edad").value;

  miLista[j] = {
    name: nombre,
    lastname: apellido,
    age: edad
  };
  return miLista;
}

// This is the part that I have trouble with, since I get an error that says "Uncaught ReferenceError: listaFinal is not defined"
resultado.innerHTML = listaFinal[0].name;

#contenedor {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border: 1px solid #CCC;
  border-radius: 20px;
  text-align: left;
  padding-top: 60px;
  box-shadow: 5px 5px 5px #D05353;
  background-color: #E58F65;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  padding-left: 65px;
}

#input {
  width: 50%;
  height: 50px;
  margin-left: 30px;
  background-color: #35A7FF;
  border-color: #82DDF0;
  color: #FFFFFF;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
  <title>Ejercicio 2</title>
</head>

<body style="background-color: #F1E8B8">
  <div id="contenedor">
    Nombre:
    <br>
    <input type="text" name="Nombre" maxlength="20" id="nombre">
    <br> Apellido:
    <br>
    <input type="text" name="Apellido" maxlength="20" id="apellido">
    <br> Edad:
    <br>
    <input type="number" name="Edad" id="edad">
    <br>
    <br>
    <button type="button" id="input">Ingresar</button>
  </div>

  <button type="button" id="ver">Ver Lista</button>
  <br>
  <div id="resultado"></div>

  <script src="javascript2.js"></script>

</body>

</html>

Solution

Just define listaFinal as Global variable and modify its value in function:

var listaFinal=[];

input.onclick = function() { 
 listaFinal=CrearArreglo(lista,i);
}
//Use it when modified

var input=document.getElementById("input"); //id of the button i want to press to fill my array
var ver=document.getElementById("ver");  //id of the button i want to press to show my array
var resultado=document.getElementById("resultado"); 
var i=0;
var lista= new Array(100);//Array va con mayuscula!!!
var listaFinal =[];
input.onclick = function() {
	listaFinal=CrearArreglo(lista,i);
	i++; //lo sumo aca porque sino en la funcion se pierde el valor
}

function CrearArreglo(miLista,j){
	var nombre=document.getElementById("nombre").value;
	var apellido=document.getElementById("apellido").value;
	var edad=document.getElementById("edad").value;

	miLista[j]={name:nombre, lastname:apellido, age:edad};
	return miLista;
}
function newFunction(){
    resultado.innerHTML=listaFinal[0].name;
}
/*this is the part that i have trouble with, since i get an error that says "Uncaught ReferenceError: listaFinal is not defined"*/

#contenedor{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border: 1px solid #CCC;
  border-radius: 20px;
  text-align: left;
  padding-top: 60px;
  box-shadow: 5px 5px 5px #D05353;
  background-color: #E58F65;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  padding-left: 65px;
}

#input{
	width: 50%;
	height: 50px;
	margin-left: 30px;
	background-color: #35A7FF;
	border-color: #82DDF0;
	color: #FFFFFF;
}

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
	<title>Ejercicio 2</title>
</head>
<body style="background-color: #F1E8B8">
<div id="contenedor">
	Nombre:
	<br>
	<input type="text" name="Nombre" maxlength="20" id="nombre">
	<br>
	Apellido:
	<br>
	<input type="text" name="Apellido" maxlength="20" id="apellido">
	<br>
	Edad:
	<br>
	<input type="number" name="Edad" id="edad">
	<br>
	<br>
	<button type="button" id="input">Ingresar</button>
</div>

<button type="button" id="ver">Ver Lista</button>
<br>
<div id="resultado"></div>
<button onclick="newFunction()">Another button</button>
<script src="javascript2.js"></script>

</body>
</html>