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

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

我正在学习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
4个回答
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!!!

    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"*/
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>

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

    </body>
    </html>

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

listaFinal
var listaFinal=[];

input.onclick = function() { 
 listaFinal=CrearArreglo(lista,i);
}
//Use it when modified
-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!!! 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;
}
-1
投票

如果在<!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>函数外部声明变量，则var listaFinal函数将引用函数外部的变量：

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