如何防止猜国旗游戏中按钮被重复点击？

问题概述 #

• 验证正确后重复点击「我验证」按钮可无限刷分
• 点击「显示答案」按钮后，仍能提交验证操作

核心解决思路 #

不用直接禁用按钮（避免样式交互问题），而是通过状态标记控制验证逻辑：

• 用isAnswered标记当前题目是否已答对，防止重复刷分
• 用isAnswerShown标记答案是否已显示，禁止后续验证操作

具体解决步骤 #

1. 补充全局状态变量 #

在全局变量里新增两个状态标记：

let flag = "Cambodia";
let ans = false;
let answerDisplayed = false;
let score = 0;
let isAnswered = false; // 标记当前题目是否已答对
let isAnswerShown = false; // 标记答案是否已显示

2. 限制验证函数getVal()的触发条件 #

在验证前先判断状态，只有未答对且未显示答案时才允许执行验证逻辑：

function getVal() {
  // 已答对或已显示答案时，直接终止函数
  if (isAnswered || isAnswerShown) return;

  const inputValue = document.querySelector('input').value;

  if (inputValue.toLowerCase() != flag.toLowerCase()) {
    document.querySelector('.result').classList.add("result-false");
    document.querySelector('.result').innerHTML = '错误答案';
    document.querySelector('.result').style.color = "red";
    ans = false;

  } else {
    document.querySelector('.result').classList.add("result-true");
    document.querySelector('.result').innerHTML = '正确答案';
    document.querySelector('.result').style.color = "green";
    ans = true;
    isAnswered = true; // 标记为已答对，锁定验证按钮逻辑
    score = score + 1;
    document.querySelector('.score').innerHTML = score;
  }
}

3. 显示答案时锁定验证逻辑 #

修改getAnswer()函数，显示答案后标记状态，禁止后续验证：

function getAnswer() {
  document.querySelector('.result').innerHTML = flag;
  document.querySelector('.result').style.color = "white";
  document.querySelector('.next').disabled = true;
  document.querySelector('.skip').innerHTML = '下一面国旗';
  isAnswerShown = true; // 标记为已显示答案，锁定验证按钮逻辑
}

4. 切换题目时重置状态 #

在getData()、skip()、next()切换题目的函数里，重置所有状态标记，确保新题目可正常验证：

function getData() {
  var json = 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/index.json'
  fetch(json)
    .then(data => data.json())
    .then(data => {
      const randomInt = getRandomInt(data.length);
      console.log(data[randomInt]);
      var image = document.getElementById("flag");
      image.src = data[randomInt].image;
      flag = data[randomInt].name;
    });
  document.querySelector('.result').innerHTML = '';
  // 重置所有状态
  ans = false;
  isAnswered = false;
  isAnswerShown = false;
  // 清空输入框
  document.querySelector('input').value = "";
}

function skip() {
  getData();
  document.querySelector('.next').disabled = false;
  document.querySelector('.skip').innerHTML = '我跳过';
}

function next() {
  if (ans == true) {
    getData();
  } else {
    document.querySelector('.result').innerHTML = '请先输入正确答案';
  }
}

修改后的完整代码 #

JavaScript 部分 #

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

let flag = "Cambodia";
let ans = false;
let answerDisplayed = false;
let score = 0;
let isAnswered = false;
let isAnswerShown = false;

function getVal() {
  if (isAnswered || isAnswerShown) return;

  const inputValue = document.querySelector('input').value;

  if (inputValue.toLowerCase() != flag.toLowerCase()) {
    document.querySelector('.result').classList.add("result-false");
    document.querySelector('.result').innerHTML = '错误答案';
    document.querySelector('.result').style.color = "red";
    ans = false;

  } else {
    document.querySelector('.result').classList.add("result-true");
    document.querySelector('.result').innerHTML = '正确答案';
    document.querySelector('.result').style.color = "green";
    ans = true;
    isAnswered = true;
    score = score + 1;
    document.querySelector('.score').innerHTML = score;
  }
}

function getData() {
  var json = 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/index.json'
  fetch(json)
    .then(data => data.json())
    .then(data => {
      const randomInt = getRandomInt(data.length);
      console.log(data[randomInt]);
      var image = document.getElementById("flag");
      image.src = data[randomInt].image;
      flag = data[randomInt].name;
    });
  document.querySelector('.result').innerHTML = '';
  ans = false;
  isAnswered = false;
  isAnswerShown = false;
  document.querySelector('input').value = "";
}

function getAnswer() {
  document.querySelector('.result').innerHTML = flag;
  document.querySelector('.result').style.color = "white";
  document.querySelector('.next').disabled = true;
  document.querySelector('.skip').innerHTML = '下一面国旗';
  isAnswerShown = true;
}

function skip() {
  getData();
  document.querySelector('.next').disabled = false;
  document.querySelector('.skip').innerHTML = '我跳过';
}

function next() {
  if (ans == true) {
    getData();
  } else {
    document.querySelector('.result').innerHTML = '请先输入正确答案';
  }
}

HTML 部分 #

<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap" rel="stylesheet">
<script>
  window.onload = function() {
    getData();
    document.querySelector('.score').innerHTML = score;
  };
</script>

<h1>GuessTheFlag</h1>

<div class="app">
  <div class="flagCanva">
    <h3>Score : <span class="score"></span></h3>
    <img width="100" id="flag" src="" alt="">
  </div>

  <div class="inputAns">
    <input type="text" name="flagName" placeholder="国家名称（英文）">
    <button type="submit" onclick="getVal()" class="validateBtn btn">我验证</button>
  </div>

  <p class="answerText"></p>
  <p class="result"></p><br>

  <div class="btns">
    <button onclick="next()" class="next btn2">下一个</button>
    <button onclick="getAnswer()" class="answer btn2">显示答案</button>
    <button onclick="skip()" class="skip btn2">我跳过！</button>
  </div>

  <p>*答案需用英文填写。<br>切换到下一题前请先验证你的答案</p>
</div>

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