如何在JavaScript中获取先后点击元素并实现猜数游戏对错判断？

完整代码 #

HTML（新增结果显示区域）

<div class="number number1"></div>
<div class="number number2"></div>
<div class="number number3"></div>
<div class="number number4"></div>
<div class="number number5"></div>
<div class="number number6"></div>
<div class="number number7"></div>
<div class="number number8"></div>
<div class="number number9"></div>
<div class="number number10"></div>
<div class="number number11"></div>
<div class="number number12"></div>
<div class="number number13"></div>
<div class="number number14"></div>
<div class="number number15"></div>
<div class="number number16"></div>
<div class="number number17"></div>
<div class="number number18"></div>
<div class="number number19"></div>
<div class="number number20"></div>
<div class="number number21"></div>
<div class="number number22"></div>
<div class="number number23"></div>
<div class="number number24"></div>
<div class="number number25"></div>
<!-- 新增结果显示区域 -->
<div id="result"></div>

JavaScript（添加两次点击的判断与比较逻辑）

// 存储第一次点击的元素
let firstClicked = null;
// 获取结果显示元素
const resultElement = document.getElementById('result');

// 数字点击逻辑
const numberClicked = document.querySelectorAll('.number')
numberClicked.forEach((number) => {
    number.addEventListener("click", (e) => {
        // 只处理空的div
        if (number.textContent === "") {
            number.textContent = randomNumber();
            number.style.background = "orangered";

            // 判断是否是第一次点击
            if (!firstClicked) {
                firstClicked = number;
                resultElement.textContent = ''; // 清空之前的结果
            } else {
                // 第二次点击，比较数字
                const firstNum = parseInt(firstClicked.textContent);
                const secondNum = parseInt(number.textContent);

                if (firstNum === secondNum) {
                    resultElement.textContent = "正确";
                    // 匹配成功，重置状态以便下一轮
                    firstClicked = null;
                } else {
                    resultElement.textContent = "错误";
                    // 匹配失败，延迟1秒后清空两个div的内容和背景色
                    setTimeout(() => {
                        firstClicked.textContent = "";
                        firstClicked.style.background = "";
                        number.textContent = "";
                        number.style.background = "";
                        firstClicked = null;
                    }, 1000);
                }
            }
        }
    })
})

// 每次调用生成随机数
function randomNumber() {
    let randomDigit = Math.floor(Math.random() * 8 + 1)
    return randomDigit
}

关键修改说明 #

• 状态存储：新增firstClicked变量，用来记录第一次点击的元素，为后续数字比较提供依据。
• 结果展示：添加结果显示区域，实时反馈配对的正确或错误状态。
• 两次点击逻辑：
  1. 首次点击空div时，生成随机数并标记该元素为待配对状态。
  2. 第二次点击空div时，提取两个元素的数字进行对比：
     • 数字匹配：显示“正确”，重置状态开启下一轮配对。
     • 数字不匹配：显示“错误”，延迟1秒后清空两个div的内容和背景色，让玩家有时间看清数字后再重置。
• 交互限制：点击已有数字的div不会触发任何操作，避免重复选择干扰游戏流程。

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