时间戳

首页 > 解决方案 > Javascript 数组 - 全局范围的问题

javascript - Javascript 数组 - 全局范围的问题

问题描述

我无法弄清楚为什么这不起作用。在第一个函数中将项目添加到数组中，但在第二个函数中无法访问（尽管声明数组时添加的项目在那里）。我认为与数组的全局范围有关，但我可以看到如何让它工作。

var theArray = ["apple"];

function addValue() {
  var myValue = document.forms["myAdd"]["myInput"].value;
  theArray.push(myValue);
  alert(theArray[theArray.length - 1]);
  /*works ok*/
}

function getValue() {
  alert(theArray[theArray.length - 1]);
  /*returns 'apple', not last item pushed on array*/
}
<h1>Array example</h1>
<form name="myAdd" onsubmit="return addValue()" method="post">
  Add to array: <input type="text" name="myInput">
  <input type="submit" value="Go">
</form>
<p>Get from array</p>
<form name="myGet" onsubmit="return getValue()" method="post">
  <input type="submit" value="Go">
</form>

标签： javascript

解决方案

提交表单的默认操作是重新加载页面（如果表单具有action=属性，则将位置更改为该属性）。

重新加载页面将导致内存中保存的所有值（即变量）被擦除。有一些方法可以解决这个问题，比如 using localStorage，但我怀疑您并不打算让表单的默认行为占据主导地位。

为此，我们preventDefault()在事件对象上有一个方法：

var theArray = ["apple"];

var addForm = document.getElementById('add-form');
var getForm = document.getElementById('get-form');

addForm.addEventListener('submit', addValue);
getForm.addEventListener('submit', getValue);

function addValue(event) {
  event.preventDefault(); // Stops the form submission
  var myValue = document.forms["myAdd"]["myInput"].value;
  theArray.push(myValue);
  alert(theArray[theArray.length - 1]);
}

function getValue(event) {
  event.preventDefault();
  alert(theArray[theArray.length - 1]); // Now works as expected.
}
<h1>Array example</h1>
<form id="add-form" name="myAdd" method="post">
  Add to array: <input type="text" name="myInput">
  <input type="submit" value="Go">
</form>
<p>Get from array</p>
<form id="get-form" name="myGet" method="post">
  <input type="submit" value="Go">
</form>

请注意我是如何onsubmit=从您的表单元素中删除该属性的，使用这些属性被认为是不好的做法on*=，因为它们会迫使您的代码变得比它需要的更全局化。

相反，我为它们提供了 ID 以便于在 DOM 中找到它们（您可以使用任何其他方法，您所需要的只是对表单 DOM 元素的引用），并调用addEventListener它们。

推荐阅读