点击按钮时如何使用按钮value值更新JavaScript全局变量

• console.log(x) 执行时机错误
  你当前将console.log(x)写在事件监听逻辑的外层，这行代码会在JS脚本加载完成后立刻执行，此时你还没有触发任何按钮点击事件，全局变量x仍为初始的undefined状态，自然不会随着后续的按钮点击同步打印最新值。如果需要每次点击后都查看x的取值，需要把打印逻辑放到点击事件的回调函数内部。
• NaN判断逻辑错误
  JS中NaN是唯一和自身不相等的特殊值，你写的e.target.value !== NaN判断永远返回true，else分支永远不会执行。而且所有表单元素的value默认都是字符串类型，直接和NaN做相等判断没有任何意义，要判断内容是否可转为数字应该用isNaN()方法。
• 变量a未声明
  你的代码中没有声明变量a就直接赋值，会导致a被隐式挂载到全局对象，容易引发变量污染问题。

const display = document.querySelector('#display');
// 初始化全局变量x
let x;
const cells = document.querySelectorAll('.cell');
cells.forEach((cell) => {
    cell.addEventListener('click', (e) => {
        const value = e.target.value;
        let a;
        // 判断是否为可转换的数字
        if (!isNaN(Number(value))) {
            a = parseInt(value, 10);
        } else {
            // 运算符场景直接保留字符串值
            a = value;
        }
        // 更新全局变量x
        x = a;
        display.textContent += a + ' ';
        // 每次点击后打印最新的x值
        console.log(x);
    });
});

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