前端问答页面无法批量校验输入框答案问题求助

你的代码存在几个核心问题，导致只有第一个问题能正常校验：

1. 重复ID冲突：HTML中id属性必须唯一，但你给所有提交按钮都用了id="Check"，所有反馈框都用了id="feedback2"。document.querySelector('#Check')只会选中第一个匹配元素，所以只有第一个按钮能触发校验。
2. JS语法错误：错误分支里document.querySelector('#feedback2') = 'Incorrect'少写了.innerHTML，会导致代码报错中断。
3. 用ID存答案的不合理性：虽然能实现，但id的语义是标识元素，用自定义data-*属性存储答案更符合规范，也避免ID包含空格的潜在问题。

修复步骤 #

1. 修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <link href="flagStyles.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Games Quiz</title>
        <script>
            window.addEventListener('DOMContentLoaded', function() {
                // 给所有提交按钮绑定点击事件
                document.querySelectorAll('.check-btn').forEach(btn => {
                    btn.addEventListener('click', function(){
                        // 定位当前按钮所属的问题区块
                        const section = this.closest('.section');
                        // 获取区块内的输入框和反馈元素
                        const input = section.querySelector('.answer-input');
                        const feedback = section.querySelector('.feedback');
                        // 获取正确答案
                        const correctAnswer = input.dataset.answer;

                        if (input.value.trim() === correctAnswer){
                            input.style.backgroundColor = 'green';
                            feedback.innerHTML = 'Correct';
                        }else{
                            input.style.backgroundColor = 'red';
                            feedback.innerHTML = 'Incorrect';
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="gameHeader">
            <h1>Video Games Quiz!</h1>
        </div>

        <div class="container">
            <h2 style="font-size: 30px;">Welcome to the Video Game Quiz!</h2>
            <hr>
        <div class="section">
            <h3>What is the highest rated game on Steam?</h3>
            <p style="font-size: 20px;">1.</p>
            <div class="imgContainer">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Steam_icon_logo.svg/2048px-Steam_icon_logo.svg.png" width="40%" style="border: 2px solid #555;">
            </div>
            <div>
                <input class="answer-input" data-answer="Portal 2" type="text">
                <button class="check-btn">Submit</button>
                <p class="feedback"></p>
            </div>
        </div>
            <div class="section">
            <h3>What is the highest rated game on Blizzard?</h3>
            <p style="font-size: 20px;">1.</p>
            <div class="imgContainer">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Blizzard_Entertainment_Logo_2015.svg/1200px-Blizzard_Entertainment_Logo_2015.svg.png" width="40%" style="border: 2px solid #555;">
            </div>
            <div>
                <input class="answer-input" data-answer="World of Warcraft" type="text">
                <button class="check-btn">Submit</button>
                <p class="feedback"></p>
            </div>
        </div>
            <div>
                <ul>
                    <li><a href="japanese.html">Japanese Journey</a></li>
                    <li><a href="flagsquiz.html">Flags Quiz</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

2. 关键改动说明 #

• 替换重复ID为Class：按钮用check-btn类，输入框用answer-input类，反馈框用feedback类，彻底解决ID冲突问题。
• 用data属性存储答案：通过data-answer存储正确答案，语义更清晰，也避免ID包含空格的潜在兼容问题。
• 基于上下文定位元素：用this.closest('.section')找到当前按钮所属的问题区块，再在区块内查找对应输入框和反馈框，确保每个按钮只操作当前问题的元素，不会干扰其他题目。
• 批量绑定事件：用document.querySelectorAll('.check-btn').forEach给所有按钮绑定点击事件，新增题目时无需修改JS代码。
• 修复语法错误：补全错误分支里的.innerHTML，确保反馈文本正常显示。

3. 扩展建议 #

后续添加新问题时，只需复制现有的.section区块，修改问题内容、图片链接和data-answer的值即可，JS代码会自动适配新题目。

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