在事件上填充数组并在事件函数处理程序之外访问它

Question

我正在尝试用按钮的值填充事件（onclick）上的数组（会有不同的按钮具有不同的值，这就是我使用数组的原因），我希望能够访问它事件处理函数之外的数组。 这是我到目前为止所尝试的，但我只是不知道如何访问事件处理函数之外的数组。

这是 HTML：

<button value="5"> button </button>
<div> The value is: <span id="res"></span></div>

这里是脚本：

var n = [];
var val;
var ret;

function add(arr,val) {
arr.push(val); 
return val;
} 
document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON") {
        val = event.target.value;
        ret = add(n, val); 
        console.log(n);      //these console.log are tests
        console.log(ret);
    } 
 console.log(ret);    //also this
});

//need to access the array here
console.log(n);    //obv doesn't work
console.log(ret);  //same

document.getElementById("res").innerHTML = ret;  //it remains undefined, obv

我知道为什么这不起作用（这是因为我在事件处理函数中做了所有事情），但我不知道如何做我想做的事情。

有什么建议吗？

Answer 1

您需要在回调中执行您想要执行的操作，而不是之前。原因是事件处理程序中的任何代码都不会在事件发生之前运行。仅声明变量不会改变执行顺序。
所以你需要把

document.getElementById("res").innerHTML = ret;

在您的事件处理函数中。

更新（和简化）代码：

var n = [];

document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON") {
        var val = event.target.value;
        n.push(val);
        console.log(n);      //these console.log are tests
        console.log(ret);
        document.getElementById("res").innerHTML = val;
    }
});