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

问题描述 投票：0回答：1

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





    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>
javascript function events onclick click
1个回答
1
投票

只需将 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>
listaFinal
var listaFinal=[];

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

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

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"*/
-1
投票

最简单，最幼稚的方法是在函数范围之外声明#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>
-1
投票

如果在input.onclick = function() { this.listFinal=CrearArreglo(lista,i); } 函数外部声明变量，则var listaFinal函数将引用函数外部的变量：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.