JavaScript开发响应式答题测验遇功能失效，请求代码问题排查

你的代码存在几个关键问题导致交互失效，具体如下：

1. 语法错误：函数与循环的括号不匹配 #

resetColor 函数内的第一个 for 循环缺少闭合的 }，导致整个函数结构错误，JS引擎无法正确解析该函数，进而后续的事件监听逻辑无法正常运行。

2. 无效的颜色值 #

错误按钮的颜色设置为 #red，这是无效的CSS颜色值，正确写法应为 red 或者十六进制的 #ff0000。

3. 多余的闭合括号 #

DOMContentLoaded回调函数末尾多了一个 }，破坏了代码结构。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Trivia!</title>
    </head>
    <body>
        <div class="header">
            <h1>Trivia!</h1>
        </div>
        <script>
            // Run script once DOM is loaded
            document.addEventListener('DOMContentLoaded', function() {
                // 获取所有按钮元素
                let correct = document.querySelectorAll('.correct');
                let wrongs = document.querySelectorAll('.wrong');

                // 重置所有按钮颜色为初始色
                function resetColor() {
                    // 重置正确按钮
                    for (let i = 0; i < correct.length; i++) {
                        correct[i].style.backgroundColor = '#d9edff';
                    }
                    // 重置错误按钮
                    for (let i = 0; i < wrongs.length; i++) {
                        wrongs[i].style.backgroundColor = '#d9edff';
                    }
                }

                // 正确按钮点击事件
                for (let i = 0; i < correct.length; i++) {
                    correct[i].addEventListener('click', function() {
                        resetColor();
                        correct[i].style.backgroundColor = 'green';
                    });
                }

                // 错误按钮点击事件
                for (let i = 0; i < wrongs.length; i++) {
                    wrongs[i].addEventListener('click', function() {
                        resetColor();
                        wrongs[i].style.backgroundColor = 'red';
                    });
                }
            });
        </script>
        <div class="container">
            <div class="section">
                <h2>Part 1: Multiple Choice </h2>
                <hr>
                <div>
                    <h3>Who sent you this link?</h3>
                    <button class="correct">Jonathan</button>
                    <button class="wrong">Thomas</button>
                    <button class="wrong">Kiara</button>
                    <button class="wrong">James</button>
                    <p class="feedbackmcq" id="feedback1"></p>
                </div>
                <div>
                    <h3>Who created this form?</h3>
                    <button class="wrong">Joel</button>
                    <button class="correct">Jonathan</button>
                    <button class="wrong">Kiara</button>
                    <button class="wrong">James</button>
                    <p class="feedbackmcq" id="feedback2"></p>
                </div>
            </div>
        </div>
    </body>
</html>

可选优化：按题目分组重置颜色 #

当前代码会重置所有题目的按钮颜色，如果你希望只重置当前题目下的按钮，可以给每个题目容器添加类名（比如question），然后在点击时只重置当前题目内的按钮：

修改后的核心逻辑 #

// 给每个题目容器添加question类后，获取所有题目容器
let questions = document.querySelectorAll('.question');

// 为每个题目内的按钮绑定事件
questions.forEach(question => {
    const correctBtn = question.querySelector('.correct');
    const wrongBtns = question.querySelectorAll('.wrong');

    // 重置当前题目内的按钮颜色
    function resetCurrentQuestionColor() {
        correctBtn.style.backgroundColor = '#d9edff';
        wrongBtns.forEach(btn => btn.style.backgroundColor = '#d9edff');
    }

    correctBtn.addEventListener('click', () => {
        resetCurrentQuestionColor();
        correctBtn.style.backgroundColor = 'green';
    });

    wrongBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            resetCurrentQuestionColor();
            btn.style.backgroundColor = 'red';
        });
    });
});

对应的HTML修改 #

给每个题目div添加question类：

<div class="question">
    <h3>Who sent you this link?</h3>
    <!-- 按钮内容 -->
</div>
<div class="question">
    <h3>Who created this form?</h3>
    <!-- 按钮内容 -->
</div>

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