求助：如何存储点击button的e.target.innerText？计算器项目开发遇阻

方法一：用全局变量存储输入值 #

声明一个全局变量保存用户输入内容，每次点击按钮时更新变量，同时同步更新页面显示区域：

// 全局变量存储当前显示值
let displayValue = '';
const buttons = document.querySelectorAll(".buttons-grid");
const display = document.querySelector(".display"); // 假设你的显示区域有这个类名

buttons.forEach((button) => {
  button.addEventListener('click', e => {
    const clickedValue = e.target.innerText;
    // 更新存储的显示值
    displayValue += clickedValue;
    // 更新页面上的显示内容
    display.textContent = displayValue;
    // 现在displayValue里就存储着用户点击的所有内容了
    console.log(displayValue);
  })
})

你之前写的getInner函数拿不到返回值，核心原因是事件回调是异步触发的：回调函数只有用户点击按钮时才会执行，而getInner会在页面加载时直接跑完，这时候e.target.innerText还没产生，自然拿不到值。而且回调函数有自己独立的作用域，外部函数没法直接访问它内部的变量。

方法二：用状态对象管理（更推荐，适配复杂功能） #

如果后续要加运算符处理、清空、计算等功能，用一个对象统一管理所有状态会更清晰：

// 状态对象，集中管理计算器的所有数据
const calculatorState = {
  currentValue: '',
  firstOperand: null,
  operator: null
};

const buttons = document.querySelectorAll(".buttons-grid");
const display = document.querySelector(".display");

buttons.forEach((button) => {
  button.addEventListener('click', e => {
    const clickedValue = e.target.innerText;
    // 可以加判断：如果是数字或小数点就追加，后续再扩展运算符逻辑
    if (!isNaN(clickedValue) || clickedValue === '.') {
      calculatorState.currentValue += clickedValue;
      display.textContent = calculatorState.currentValue;
    }
    // 后续可添加运算符、等于、清空等操作的处理逻辑
  })
})

核心概念拆解 #

1. 事件回调的异步性：浏览器的事件监听是“等待触发”模式，回调函数不会在页面加载时执行，只有用户触发对应事件（比如点击）才会运行。这意味着不能像同步函数那样直接从回调里返回值给外部。
2. 作用域规则：每个函数都有自己的作用域，回调函数内部的变量（比如e）只能在回调内部访问，外部函数无法直接获取。全局变量或外部作用域的对象能突破这个限制，因为它们的作用域覆盖了回调函数。
3. 状态管理：对于交互类应用（比如计算器），把需要持久化的数据（用户输入、运算数、运算符）集中管理，能避免零散全局变量带来的混乱，让代码更易维护。

学习资源推荐 #

• MDN Web Docs：搜索“JavaScript 事件处理”“JavaScript 作用域”，有详细的基础概念讲解和实操示例。
• The Odin Project：你正在完成的计算器项目后续章节，会涉及状态管理和事件处理的进阶内容，可回头巩固基础模块。
• 《JavaScript 高级程序设计》：书中关于作用域、异步事件的章节，能帮你理解底层逻辑。

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