如何通过onclick事件避免重复选取字母数字组合（宾果游戏开发）

完全可行，只需要添加一个存储已生成宾果码的数组，并在生成新码时检查是否重复即可。下面是修改后的完整代码和说明：

完整HTML代码 #

<button onclick="myForEach();"> Click me </button>
<div id="demo"></div>

完整JavaScript代码 #

// 存储已生成的宾果码，放在函数外部才能保留历史记录
let usedBingoCodes = [];

function myForEach(){
    const letters = ["A", "B", "D", "E", "G", "H", "I", "J", "K", "N", "O", "S", "T", "U", "V", "W", "X", "Z"];
    const numbers = ["1", "2", "3", "4", "5", "6"];
    let bingo;

    // 先判断是否所有组合都已用完，避免无限循环
    if (usedBingoCodes.length === letters.length * numbers.length) {
        document.getElementById("demo").innerHTML = "所有宾果码已生成完毕！";
        return;
    }

    // 循环生成，直到得到未使用过的宾果码
    do {
        const getLetter = letters[Math.floor(Math.random() * letters.length)];
        const getNumber = numbers[Math.floor(Math.random() * numbers.length)];
        bingo = getLetter + getNumber;
    } while (usedBingoCodes.includes(bingo));

    // 将新生成的码存入已使用数组
    usedBingoCodes.push(bingo);
    // 展示到页面
    document.getElementById("demo").innerHTML = bingo;
};

关键修改说明 #

• 全局存储数组：usedBingoCodes 放在函数外部，这样每次点击按钮都能访问到之前生成过的所有码，不会每次调用函数就清空记录。
• 重复检查逻辑：用 do-while 循环先生成一次宾果码，再检查是否在已使用数组中，如果重复就重新生成，直到得到唯一的码。
• 变量声明规范：给所有变量加上 const/let 声明，避免意外生成全局变量污染环境。
• 边界处理：添加了所有组合用完的判断，防止所有可能的码都生成后出现无限循环的情况。

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