JS猜国旗游戏问题：可获取输入值但无法与正确答案比较

问题分析 #

• 变量作用域缺失：inputValue仅在getVal函数内定义，getData无法访问；data[randomInt]在fetch的异步回调中，外部的判断代码会在数据返回前执行，导致无法获取正确答案。
• 异步逻辑顺序错误：fetch是异步操作，后续的答案判断代码会先于数据请求完成执行，此时还未拿到国旗对应的国家信息，自然无法对比。
• DOM操作错误：document.getElementsByClassName()返回的是元素集合，不能直接调用.class.add和.innerHTML，需先获取集合中的第一个元素，且添加类名要用classList.add()。
• 功能逻辑错位：答案验证逻辑应绑定到“确认答案”按钮，而非“下一题”按钮；答对后应自动刷新国旗，实现循环游戏。

修正后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Guess The Flag</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>GuessTheFlag</h1>

  <div class="flagCanva">
    <img id="flag" src="https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KH.svg" alt="国旗">
  </div>

  <input type="text" name="flagName" placeholder="输入国家名称">
  <button type="submit" onclick="checkAnswer()">确认答案</button>

  <p class="result"></p><br>
  <button onclick="getData()">下一题</button>

  <script>
    // 存储当前国旗对应的正确国家名称
    let currentCorrectAnswer = '';

    function getRandomInt(max) {
      return Math.floor(Math.random() * max);
    }

    function getData() {
      const jsonUrl = 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/index.json';
      // 清空结果提示和输入框
      document.querySelector('.result').innerHTML = '';
      document.querySelector('.result').classList.remove('result-false', 'result-true');
      document.querySelector('input').value = '';

      fetch(jsonUrl)
        .then(response => response.json())
        .then(data => {
          const randomIndex = getRandomInt(data.length);
          const selectedCountry = data[randomIndex];
          // 更新国旗图片
          document.getElementById("flag").src = selectedCountry.image;
          // 保存当前正确答案（转小写方便对比）
          currentCorrectAnswer = selectedCountry.name.toLowerCase();
        });
    }

    function checkAnswer() {
      const inputValue = document.querySelector('input').value.trim().toLowerCase();
      const resultElement = document.querySelector('.result');

      // 先清空之前的类和内容
      resultElement.classList.remove('result-false', 'result-true');

      if (!inputValue) {
        resultElement.innerHTML = '请输入国家名称';
        return;
      }

      if (inputValue !== currentCorrectAnswer) {
        resultElement.classList.add('result-false');
        resultElement.innerHTML = '错误答案';
      } else {
        resultElement.classList.add('result-true');
        resultElement.innerHTML = '正确答案';
        // 答对后自动加载下一题
        setTimeout(getData, 1000);
      }
    }

    // 页面加载时初始化第一题
    window.onload = getData;
  </script>
</body>

</html>

关键修正点说明 #

1. 全局变量存储正确答案：新增currentCorrectAnswer变量，在获取随机国旗时保存对应的国家名称（转小写），方便验证时对比。
2. 调整异步逻辑：将答案判断逻辑移到checkAnswer函数，仅在用户点击“确认答案”时执行，确保此时已拿到正确答案。
3. 修复DOM操作：使用document.querySelector('.result')直接获取单个元素，替换getElementsByClassName，并通过classList.add/remove操作类名。
4. 优化交互流程：页面加载时自动初始化第一题；答对后延迟1秒自动加载下一题；清空输入框和结果提示，提升体验。

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