如何在函数外部获取变量的值？JS新手技术求助

问题核心原因 #

你写的console.log(outputArr)是在页面加载完成后立刻执行的，而点击按钮的回调函数只有在用户实际点击按钮时才会触发。代码执行顺序是：

1. 初始化inputValue和outputArr
2. 给按钮注册点击事件监听
3. 执行console.log(outputArr)（此时数组还是空的）
4. 之后用户点击按钮，才会修改数组

另外代码里有个拼写错误：document.getElementbyId要改成document.getElementById（注意Id的大写，否则会报错找不到元素）

解决方案 #

方案1：点击后直接打印更新后的数组

把console.log放到点击事件的回调函数内部，每次点击按钮修改数组后立刻打印：

var inputValue = ""; 
var outputArr = []; 

// 修正拼写错误
document.getElementById('addbtn').addEventListener('click', function() { 
    inputValue = document.getElementById('inputValue').value;
    outputArr.push(inputValue); 
    console.log(outputArr); // 点击后立即打印最新数组
});

方案2：封装处理逻辑，点击后调用

如果需要用更新后的数组做更多事情（比如更新页面显示），可以把逻辑封装成函数，在点击事件里调用：

var inputValue = ""; 
var outputArr = []; 

// 处理更新后数组的函数
function useUpdatedArray() {
    console.log(outputArr);
    // 示例：把数组内容显示到页面的result元素里
    document.getElementById('result').textContent = `当前已输入内容：${outputArr.join(', ')}`;
}

document.getElementById('addbtn').addEventListener('click', function() { 
    inputValue = document.getElementById('inputValue').value;
    outputArr.push(inputValue); 
    useUpdatedArray(); // 调用处理函数
});

方案3：后续主动获取最新数组

如果想在其他操作（比如另一个按钮点击）时获取最新数组，直接访问全局变量outputArr即可（注意全局变量尽量少用，适合入门场景）：

<!-- 先在HTML里加一个查看按钮 -->
<button id="viewBtn">查看数组</button>

var inputValue = ""; 
var outputArr = []; 

document.getElementById('addbtn').addEventListener('click', function() { 
    inputValue = document.getElementById('inputValue').value;
    outputArr.push(inputValue); 
});

// 点击查看按钮时打印最新数组
document.getElementById('viewBtn').addEventListener('click', function() {
    console.log(outputArr);
});

补充说明 #

JavaScript是单线程执行的，页面加载时会按代码顺序同步执行，事件回调函数属于异步任务，只有当用户触发对应的事件（比如点击）时，才会被加入事件队列等待执行。所以你之前的console.log执行时机远早于数组被修改的时机，自然打印空数组。

内容的提问来源于stack exchange，提问作者Viet Tien Do