JavaScript事件监听器中全局变量赋值后外部无法访问问题求助

你的代码核心问题是执行顺序不对：页面加载时，创建并设置results div内容的代码就已经同步跑完了，这时候用户还没点击按钮，gameResult还是初始空字符串。而点击按钮给gameResult赋值是后续的异步操作，不会自动触发已经创建好的div更新内容。

不用把创建div的代码塞进回调里，给你两种清爽的解决方式：

方式一：提前创建div，点击时仅更新内容 #

把创建结果容器的逻辑提前，页面加载时就把空的结果div挂载到页面，之后每次点击只更新它的文本内容，代码结构保持清晰：

let gameResult = "";

// 提前创建并挂载结果div，只执行一次
const results = document.createElement('div');
results.classList.add('results');
const container = document.querySelector('.resContainer');
container.appendChild(results);

let buttonGroup = document.querySelector('.buttons');

buttonGroup.addEventListener('click', (e) => {
    // 过滤非按钮点击（防止点到父容器空白区）
    if (!e.target.matches('button')) return;
    gameResult = playRound(e.target.id);
    // 直接更新已存在的div内容
    results.textContent = gameResult;
    console.log(gameResult);
});

方式二：封装更新函数，模块化管理 #

如果想让代码职责更清晰，可以把更新结果显示的逻辑单独封装成函数，回调里只负责获取结果和调用更新函数：

let gameResult = "";

// 提前创建并挂载结果div
const results = document.createElement('div');
results.classList.add('results');
const container = document.querySelector('.resContainer');
container.appendChild(results);

// 专门负责更新结果显示的函数
function updateResult() {
    results.textContent = gameResult;
}

let buttonGroup = document.querySelector('.buttons');

buttonGroup.addEventListener('click', (e) => {
    if (!e.target.matches('button')) return;
    gameResult = playRound(e.target.id);
    updateResult();
    console.log(gameResult);
});

本质上就是：你需要在gameResult的值改变后，主动触发一次结果div的文本更新，因为初始赋值div内容的代码只会执行一次，不会自动监听变量变化。

内容的提问来源于stack exchange，提问作者colivartt