从函数将多个数组项添加到全局数组答案

【问题标题】：Adding multiple array items to a global array from a function从函数将多个数组项添加到全局数组
【发布时间】：2018-03-20 01:15:13
【问题描述】：

/* 问题 1：似乎我在范围方面遇到了问题。我的目标是将提示响应推送到数组中，而不将变量保留在函数内，范围阻止变量通信（或至少看起来如此。）这也阻止 getElementById 显示为常量而不被功能。

问题2：当变量全部放在本地时，提示替换它在数组中的前一项，使其只有一项可以添加，想知道有没有人建议如何添加更多。

HTML：

<p id = "coding"></p>
<button onclick="addTo()">Add</button>
New Quality
<br><br>
<button onclick="noMas()">Delete</button>
Remove Quality

JS：

function addTo(){
var progQual = ["Creative"," "+"Original"+" "+"Innovative", ];
addQuality = prompt("Add Another Quality");
addQuality = progQual.push(" "+addQuality);
document.getElementById("coding").innerHTML = progQual;

function noMas(){progQual.shift(progQual);}
};

在这一点上有点难过:(

【问题讨论】：

标签： javascript arrays function scope

【解决方案1】：

首先为您的按钮分配 id 并删除 onclick 属性：

<p id = "coding"></p>
<button id="btn-add">Add</button>
New Quality
<br><br>
<button id="btn-delete">Delete</button>
Remove Quality

在您的 JS 中，将您的代码隔离在一个自调用匿名函数中，并在回调的父范围内定义 progEqual。使用addEventListener添加监听器：

(function() { //Isolate scope
  /*
   * Define array in parent scope of callbacks to gain access to 
   * same referemce in both callbacks
   */
  var progQual = ["Creative"," "+"Original"+" "+"Innovative"];

  document.getElementById("btn-add").addEventListener("click", function() {
    // Add logic
  });

  document.getElementById("btn-delete").addEventListener("click", function() {
    //Delete logic
  });

}());

如需了解更多信息，请搜索 Javascript 范围，例如来自 Scotch.io - Understanding Javascript Scope 的本教程。

【讨论】：