为什么函数外的数组变量会导致我的 JavaScript 列表应用出现问题？

Question

以下 JavaScript 列表应用程序允许用户通过单击按钮将项目输入到具有 JS 推送方法的数组中。然后使用 DOM 方法将项目附加到无序列表。示例 #1 在函数中包含数组变量，并正确地将单个项目附加到单个列表元素。但是，当在示例 #2 中将数组变量放在函数之前时，会出现第一项正确附加的情况，但再次单击以添加第二项会导致新项和前一项（重复）附加到一个新的列表元素。为什么在函数之前包含数组变量时，先前的项目会重新附加到新的列表元素？请参阅下面的示例。感谢反馈！

示例 #1 JS:

<script>
  function add(){
    var array = [];
    var task = document.getElementById("task").value;
    array.push(task);

    var text = document.createTextNode(array);
    var elem = document.createElement("li");
    elem.appendChild(text);
    document.getElementById("myUl").appendChild(elem);
  };
</script>

示例 #1 HTML：

<input id="task">
<button onclick="add()">add</button>
<ul id="myUl"></ul>

示例 #2 JS:

<script>
var array = [];

  function add(){
    var array = [];
    var task = document.getElementById("task").value;
    array.push(task);

    var text = document.createTextNode(array);
    var elem = document.createElement("li");
    elem.appendChild(text);
    document.getElementById("myUl").appendChild(elem);
  };
</script>

示例 #2 HTML：

<input id="task">
<button onclick="add()">add</button>
<ul id="myUl"></ul>

Answer 1

在示例 2 中，您在 array 变量中有一个重复项。您可能需要的是：

var array = [];

function add() {
  var task = document.getElementById("task").value;
  array.push(task);

  var text = document.createTextNode(task);
  var elem = document.createElement("li");
  elem.appendChild(text);
  document.getElementById("myUl").appendChild(elem);
  
  console.log(array);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
  </script>
</head>

<body>
  <input id="task">
  <button onclick="add()">add</button>
  <ul id="myUl"></ul>
</body>

</html>

此外，我怀疑您是否可以从数组创建文本节点（并且您想要那个）。我认为你提到的是task变量。

Answer 2

您的示例 2 与您的示例 1 完全相同。

但您可能不打算在第二个示例中的函数内声明数组变量。在那种情况下，数组外部函数实际上保存着用户输入的所有任务的列表。

此外，createTextNode 以字符串而非数组作为参数。当您传递数组时，它会将任务数组转换为逗号分隔的字符串并附加到列表中。

因此，在您的 add() 函数中，仅将最后添加的项目传递给 createTextNode 方法，例如

document.createTextNode(array[array.length - 1])

来到你的第一个例子，它不会在你的记忆中保存输入，因为数组变量是在函数内部声明的，并且被初始化为一个空数组 - 每次函数被调用时，即每当一个任务已添加。

为什么函数外的数组变量会导致我的 JavaScript 列表应用出现问题？

Why does array variable outside of function cause issues for my JavaScript list app?

javascript

arrays

push

list