输入值控制代码执行次数问题：for循环致forEach无限运行

你的问题核心在于重复绑定点击事件和错误的次数控制逻辑：

• 每次按Enter触发事件时，用for循环包裹forEach绑定点击事件，会让每个图片被重复绑定inputVal次点击事件。后续点击图片时，同一个事件会被触发N次，表现为“无限运行”。
• 游戏次数控制不该通过循环绑定事件实现，而是应该用计数器跟踪已完成的游戏局数。

修正后的代码实现 #

// 初始化计数器与目标局数
let completedGames = 0;
let targetGameCount = 0;

// 仅绑定一次图片点击事件，避免重复绑定
optionImages.forEach((image, index) => {
    image.addEventListener("click", (e) => {
        // 未设置目标局数或已完成所有局数时，直接返回
        if (targetGameCount === 0 || completedGames >= targetGameCount) return;

        image.classList.add("active");
        userResult.src = cpuResult.src = "images/rock.png";
        result.textContent = "Wait...";

        optionImages.forEach((image2, index2) => {
            if (index !== index2) {
                image2.classList.remove("active");
            }
        });

        gameContainer.classList.add("start");

        // 这里替换为你的游戏核心逻辑（CPU选择、胜负判断等）
        // 模拟游戏流程完成后的计数器更新
        setTimeout(() => {
            completedGames++;
            // 完成所有局数后重置状态
            if (completedGames >= targetGameCount) {
                result.textContent = `游戏结束！共完成${targetGameCount}局`;
                gameContainer.classList.remove("start");
                // 重置计数器，方便下次输入
                completedGames = 0;
                targetGameCount = 0;
            }
        }, 1000); // 模拟游戏处理耗时
    });
});

// 输入框Enter事件处理
inputField.addEventListener("keyup", (e) => {
    let inputVal = inputField.value;
    if (e.key === "Enter" && inputVal.length > 0) {
        // 转换输入值为整数并校验有效性
        const inputNum = parseInt(inputVal);
        if (isNaN(inputNum) || inputNum <= 0) {
            result.textContent = "请输入有效的正整数";
            return;
        }
        // 设置目标局数并重置计数器
        targetGameCount = inputNum;
        completedGames = 0;
        result.textContent = `即将开始${targetGameCount}局游戏，请选择`;
    }
});

关键改动说明 #

• 单次事件绑定：将图片点击事件的绑定逻辑移到Enter事件监听之外，页面加载后仅执行一次，彻底避免重复绑定导致的多次触发问题。
• 计数器控制逻辑：通过completedGames记录已完成局数，targetGameCount存储输入的目标次数，每次游戏流程结束后递增计数器，达到目标后自动停止游戏并重置状态。
• 输入有效性校验：将输入的字符串转为整数，过滤非数字或非正整数的无效输入，提升鲁棒性。

内容的提问来源于stack exchange，提问作者Murat Yıldırım