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

Javascript数组-全局范围问题

1 个答案: