是否可以使用我从 .onclick 事件函数中获得的变量，并在所述事件之外的代码的另一部分中使用它？

Question

我正在学习 JavaScript，我正在做一个简单的项目，我有一个表单（name、lastname 和 age) 和一个按钮。我希望用户填写表格，然后按下按钮。之后我想使用 .onclick 事件将所有信息存储在一个数组中。然后我想创建另一个按钮，当我按下它时，它会显示我的数组中所有姓名、姓氏和年龄的列表。问题是，我在 .onclick 事件函数中创建的数组不能在所述函数之外使用。我做错了什么还是不可能这样做？这是我的部分代码：

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><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;
    }


    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>

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

    </body>
    </html>

Answer 1

只需将listaFinal定义为全局变量，并在函数中修改其值即可：

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>

Answer 2

如果您在 onclick 函数外声明变量，您的 onclick 函数将引用函数外的变量：

var listaFinal;

input.onclick = function() {
    listaFinal = CrearArreglo(lista, i);
    ...
};

resultado.innerHTML = listaFinal[0].name;

Answer 3

您可以在函数范围外声明 var listaFinal。

然后在函数内部重新赋值：

listaFina = crearrArreglo()

Answer 4

类似于 Ritesh 的解决方案，但您甚至不需要创建此全局变量。您可以将它添加到函数中，然后通过 input.onclick 访问它（例如 input.onclick.listFinal）

input.onclick = function() { 
 this.listFinal=CrearArreglo(lista,i);
}

是否可以使用我从 .onclick 事件函数中获得的变量，并在所述事件之外的代码的另一部分中使用它？

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?

javascript

events

function

click

onclick