如何访问forEach创建的JS按钮并禁用匹配组的按钮？

要实现匹配成功后禁用同组所有4个按钮，核心是要能获取到所有同组的按钮实例，而不是仅能访问当前点击的单个按钮。你可以通过以下两种方式实现：

1. 保存所有按钮的引用到数组 #

在创建按钮时，把每个按钮实例存入一个全局数组，后续通过数组筛选出同组按钮进行操作。

2. 使用规范的自定义数据属性（推荐） #

将分组信息存入HTML元素的data-*属性（符合HTML标准），之后通过DOM选择器直接选中所有同组按钮。

修改后的完整代码 #

const parentElement = document.querySelector('.game-container');
const allButtons = []; // 保存所有按钮实例的数组
let buttonIDs = [];
let buttonGroups = [];

wordButtons.forEach(function (b) {
    const button = document.createElement('button');
    button.innerText = b.word;
    button.dataset.group = b.group; // 用data属性存储分组，符合规范
    button.id = b.buttonId;
    button.active = false;
    parentElement.appendChild(button);
    allButtons.push(button); // 将按钮加入数组

    button.onclick = function () {
        if (!button.active) {
            // 选中按钮
            buttonIDs.push(button.id);
            buttonGroups.push(button.dataset.group);
            button.active = true;
            button.style.backgroundColor = "white";
        } else {
            // 取消选中
            button.active = false;
            button.style.backgroundColor = "rgb(241, 215, 225)";
            // 修正splice用法：只删除当前元素，不是从索引到末尾
            const idIndex = buttonIDs.indexOf(button.id);
            if (idIndex !== -1) buttonIDs.splice(idIndex, 1);
            const groupIndex = buttonGroups.indexOf(button.dataset.group);
            if (groupIndex !== -1) buttonGroups.splice(groupIndex, 1);
        }

        if (buttonIDs.length === 4) {
            const targetGroup = buttonGroups[0];
            // 检查是否所有选中按钮属于同一组
            if (buttonGroups.every(group => group === targetGroup)) {
                console.log("you matched a set!");
                // 禁用同组所有按钮
                allButtons.forEach(btn => {
                    if (btn.dataset.group === targetGroup) {
                        btn.disabled = true;
                        btn.style.backgroundColor = "#ccc"; // 可选：设置禁用后的样式
                    }
                });
                // 清空选中状态数组
                buttonIDs = [];
                buttonGroups = [];
            } else {
                // 可选：匹配失败时取消所有选中状态
                buttonIDs.forEach(id => {
                    const btn = document.getElementById(id);
                    btn.active = false;
                    btn.style.backgroundColor = "rgb(241, 215, 225)";
                });
                buttonIDs = [];
                buttonGroups = [];
            }
        }
    }
});

关键修改点说明 #

• 新增allButtons数组存储所有按钮实例，方便后续筛选。
• 用button.dataset.group替代直接添加button.group，符合HTML自定义属性的规范。
• 修正了splice的用法：原代码splice(buttonIDs.indexOf(button.id))会删除从当前索引到数组末尾的所有元素，改为splice(index, 1)仅删除当前元素。
• 匹配成功后，遍历allButtons数组找到同组按钮并禁用，同时清空选中状态数组。
• 可选添加了匹配失败时的重置逻辑，提升用户体验。

为什么移出onclick逻辑不行？ #

你之前尝试把判断逻辑移出onclick上下文，会导致代码仅在页面加载时执行一次，而不会在用户点击按钮、选中4个元素后触发。判断逻辑必须放在onclick事件内，或者通过监听buttonIDs数组的变化来触发，但前者是最直接且易维护的方式。

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