Javascript 数组 - 全局范围的问题

Question

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

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>

Answer 1

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

重新加载页面将导致内存中保存的任何值(即变量)被删除。有很多方法可以解决这个问题，例如使用 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在他们身上。