JavaScript国旗猜谜游戏：函数无法触发提示框及输入对比问题修复

我正在开发一款国旗猜谜游戏：展示随机国旗图片，用户输入对应国家名称，对比输入与国旗对象的value，答对/答错弹出提示。但目前输入答案后脚本无任何反应，需要修复逻辑。

原HTML代码 #

<div class="imageContainer">
    <script language="javascript">
        document.write("<div id = flagImage><img src = " + link[random_num].flag + " alt = Flag width = 250px></div>");
    </script>
</div>

<div class="guessEnter">
    <form onclick="return false">
        <input type="text" id="guess" placeholder="Make a guess...">
        <div class="submitButton">
            <input type="submit" onclick="checkGuess();">
        </div>
    </form>
</div>

原JavaScript代码 #

/* Pulls random image to display on page */
random_num = (Math.round((Math.random() * 4) + 1));

link = new Array;

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' };

/* Execute function on enter */
guess.addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
        checkGuess();
    }
});

/* Function that compares user input to link value */
const guess = document.getElementById("guess");

function checkGuess() {
    if (link[random_num].value.toLowerCase() === guess.value.toLowerCase()) {
        alert('You Win!'); //correct guess
    } else {
        alert('Wrong!'); //wrong guess
    }
}

问题分析与修复步骤 #

1. 变量顺序与作用域问题

• 原代码中guess变量在绑定事件监听器之后才声明，导致guess.addEventListener执行时guess未定义，事件绑定失败。
• 全局变量random_num、link未用var/let/const声明，可能引发作用域冲突。

2. 随机数生成错误

• Math.round((Math.random() * 4) + 1)会生成1-5的随机数，但数组只有1-4索引，可能导致link[5]不存在，触发报错中断脚本。

3. 表单默认提交行为

• 点击submit按钮会触发表单默认提交，导致页面刷新，脚本重置，checkGuess函数执行被中断。

4. 多答案逻辑错误

• 阿联酋的value写成'uae' + 'united arab emirates'会拼接成uaeunited arab emirates，无法匹配用户输入的两种正确答案。

修复后的完整代码 #

HTML部分

<div class="imageContainer" id="flagImage"></div>

<div class="guessEnter">
    <form id="guessForm">
        <input type="text" id="guess" placeholder="Make a guess...">
        <div class="submitButton">
            <input type="submit" value="提交猜测">
        </div>
    </form>
</div>

JavaScript部分

// 国旗数据数组（支持多答案用数组存储）
const link = [
    {}, // 占位用，保持索引1-4对应原数据
    { flag: "../assets/flagImages/ad.png", value: 'andorra' },
    { flag: "../assets/flagImages/ae.png", value: ['uae', 'united arab emirates'] },
    { flag: "../assets/flagImages/af.png", value: 'afghanistan' },
    { flag: "../assets/flagImages/ag.png", value: 'antigua and barbuda' }
];

// 生成1-4的随机数（确保不会超出数组索引）
const random_num = Math.floor(Math.random() * 4) + 1;

// 获取DOM元素（先声明再使用）
const guessInput = document.getElementById("guess");
const flagContainer = document.getElementById("flagImage");
const guessForm = document.getElementById("guessForm");

// 渲染国旗图片（替换document.write，更规范）
flagContainer.innerHTML = `<img src="${link[random_num].flag}" alt="国旗" width="250px">`;

// 表单提交事件（阻止默认刷新行为）
guessForm.addEventListener('submit', function(e) {
    e.preventDefault();
    checkGuess();
});

// 回车键触发猜测
guessInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        checkGuess();
    }
});

// 检查答案逻辑
function checkGuess() {
    // 处理用户输入：去空格+转小写
    const userInput = guessInput.value.trim().toLowerCase();
    // 统一处理正确答案为数组格式
    const correctAnswers = Array.isArray(link[random_num].value)
        ? link[random_num].value.map(ans => ans.toLowerCase())
        : [link[random_num].value.toLowerCase()];

    if (correctAnswers.includes(userInput)) {
        alert('答对了！🎉');
        // 可在此添加"下一题"逻辑，重新生成随机数并渲染新国旗
    } else {
        alert('答错了，再试试！💡');
    }
}

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