HTML+JS猜国旗游戏函数异常：提交表单无响应求助

核心问题及修复步骤： #

• 1. 用户输入获取错误
  你在全局作用域中用document.getElementById("input")获取输入框，但HTML里输入框的id是guess，根本找不到元素；而且页面加载时就获取值，此时输入框是空的，应该在checkGuess函数内实时读取用户输入。
  修复：在函数内获取输入值：

  function checkGuess(event) {
    event.preventDefault();
    const userGuess = document.getElementById("guess").value.trim().toLowerCase();
    // ...后续逻辑
  }
  

• 2. event参数未传入
  函数里用event.preventDefault()但没把event作为参数传入，会导致event未定义，函数执行中断。
  修复：修改函数定义为checkGuess(event)，同时HTML里的绑定改成onsubmit="checkGuess(event)"（建议移除按钮的onclick避免重复触发）。

• 3. 随机数可能越界
  Math.round((Math.random() *4)+1)会生成1-5的整数（当Math.random()*4接近4时，+1后round结果为5），但你的link数组只有1-4的索引，会导致link[5]为undefined，触发错误。
  修复：用Math.floor(Math.random() *4)+1生成1-4的随机整数：

  const random_num = Math.floor(Math.random() * 4) + 1;
  

• 4. 阿联酋的答案匹配逻辑错误
  link[2].value写成了'uae' + 'united arab emirates'，会拼接成uaeunited arab emirates，用户无论输入简称还是全称都匹配不上。应该允许两种输入都算正确。
  修复：把value改成数组，然后判断用户输入是否在数组内：

  link[2] = { flag: "../assets/flagImages/ae.png", value: ['uae', 'united arab emirates'] };
  // 匹配逻辑改成：
  const correctAnswers = link[random_num].value.map(item => item.toLowerCase());
  if (correctAnswers.includes(userGuess)) {
    alert('Correct!');
  } else {
    alert('Wrong!');
  }
  

• 5. 重复绑定提交事件
  form的onsubmit和submit按钮的onclick都绑定了checkGuess，会导致函数执行两次，还可能引发冲突。建议只保留form的onsubmit。
  修复：移除按钮的onclick，保留form的onsubmit：

  <form onsubmit="checkGuess(event)">
    <input type="text" id="guess" value="" placeholder="Make a guess...">
    <div class="submitButton">
      <input type="submit">
    </div>
  </form>
  

• 6. document.write的潜在问题
  如果JS代码在HTML之后加载，执行document.write时link和random_num还没定义，会直接报错。建议用DOM操作创建图片元素。
  修复：HTML里提前写好<div id="flagImage"></div>，替换内嵌script为页面加载后的DOM操作：

  window.onload = function() {
    const flagImageDiv = document.getElementById('flagImage');
    const img = document.createElement('img');
    img.src = link[random_num].flag;
    img.alt = 'Flag';
    img.style.width = '50%';
    flagImageDiv.appendChild(img);
  };
  

修改后的完整代码： #

HTML：

<div class="content">
  <div class="contentContainer">
    <div class="imageContainer">
      <div id="flagImage"></div>
    </div>
    <div class="guessEnter">
      <form onsubmit="checkGuess(event)">
        <input type="text" id="guess" value="" placeholder="Make a guess...">
        <div class="submitButton">
          <input type="submit" value="Submit Guess">
        </div>
      </form>
    </div>
  </div>
</div>

JavaScript：

// 生成1-4的随机数
const random_num = Math.floor(Math.random() * 4) + 1;

// 国旗数据数组
const link = [];
link[1] = { flag: "../assets/flagImages/ad.png", value: ['andorra'] };
link[2] = { flag: "../assets/flagImages/ae.png", value: ['uae', 'united arab emirates'] };
link[3] = { flag: "../assets/flagImages/af.png", value: ['afghanistan'] };
link[4] = { flag: "../assets/flagImages/ag.png", value: ['antigua and barbuda'] };

// 页面加载后渲染国旗
window.onload = function() {
  const flagImageDiv = document.getElementById('flagImage');
  const img = document.createElement('img');
  img.src = link[random_num].flag;
  img.alt = 'Flag';
  img.style.width = '50%';
  flagImageDiv.appendChild(img);
};

// 验证猜测的函数
function checkGuess(event) {
  event.preventDefault();
  const userGuess = document.getElementById("guess").value.trim().toLowerCase();
  const correctAnswers = link[random_num].value.map(item => item.toLowerCase());
  
  if (correctAnswers.includes(userGuess)) {
    alert('Correct!');
    // 可在此添加下一题逻辑
  } else {
    alert('Wrong!');
  }
}

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