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

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

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

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;
    }
});

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

Filling array on event and access it outside the event function handler

javascript

arrays

events

dom

dom-events