前端计算器开发问题：同一类名按钮仅7生效，求DRY合规解决方案

核心问题 #

你当前代码中 const buttons = document.querySelector(".calc-button"); 只会选中第一个拥有 calc-button 类的元素（也就是数字7的按钮），所以只有这个按钮能触发点击事件，其他数字按钮完全没有绑定监听逻辑。

另外你的HTML里有个语法错误：数字8的按钮闭合标签写成了 </butbutton>，应该修正为 </button>，否则可能导致DOM解析异常。

解决方案一：使用 querySelectorAll + forEach 批量绑定事件 #

这种方式会选中所有数字按钮，然后逐个绑定点击事件，符合你不想重复写监听的需求：

const screens = document.querySelector(".screen");
const clearing = document.querySelector(".calc-buttonBigC");
// 改用querySelectorAll获取所有数字按钮
const buttons = document.querySelectorAll(".calc-button");

clearing.addEventListener('click', () => {
    screens.textContent = "";
});

// 遍历每个按钮添加监听
buttons.forEach(button => {
    button.addEventListener('click', () => {
        screens.textContent += button.textContent;
    });
});

解决方案二：事件委托（更优方案） #

利用事件冒泡机制，只在父容器上绑定一个监听事件，判断点击的目标是否为数字按钮。这种方式更高效，尤其适合后续可能动态添加按钮的场景：

const screens = document.querySelector(".screen");
const clearing = document.querySelector(".calc-buttonBigC");
// 选中所有按钮的父容器
const calcButtonsContainer = document.querySelector(".calc-buttons");

clearing.addEventListener('click', () => {
    screens.textContent = "";
});

// 在父容器上绑定单次监听
calcButtonsContainer.addEventListener('click', (e) => {
    // 判断点击的元素是否是数字按钮
    if (e.target.classList.contains('calc-button')) {
        screens.textContent += e.target.textContent;
    }
});

额外修复 #

请修正HTML中数字8按钮的闭合标签：

<button class='calc-button'>8</button> <!-- 把</butbutton>改成</button> -->

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