Можно ли использовать переменную, полученную из функции события .onclick, и использовать ее вне указанного события в другой части кода? - PullRequest
Новая
       23

Можно ли использовать переменную, полученную из функции события .onclick, и использовать ее вне указанного события в другой части кода?

0 голосов
/ 10 января 2020

Я изучаю 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 class="snippet-code-js lang-js prettyprint-override"><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>

Ответы [ 4 ]

2 голосов
/ 10 января 2020

Аналогично решению Rite sh, но вам даже не нужно создавать эту глобальную переменную. Вы можете просто добавить его в функцию и получить к нему доступ через input.onclick (например, input.onclick.listFinal) 

input.onclick = function() { 
 this.listFinal=CrearArreglo(lista,i);
}
2 голосов
/ 10 января 2020

Просто определите 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>
0 голосов
/ 10 января 2020

Вы можете объявить var listaFinal вне области действия функции.

, а затем переназначить его внутри функции: 

listaFina = crearrArreglo()
0 голосов
/ 10 января 2020

Если вы объявите свою переменную вне функции onclick, ваша функция onclick будет ссылаться на переменную вне функции: 

var listaFinal;

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

resultado.innerHTML = listaFinal[0].name;
...