如何将单选按钮的答题结果保存到Local Storage？

你的代码存在几个关键问题，导致无法正确保存答题结果： #

1. 异步请求逻辑错误：生成测验DOM的代码未放在readyState === DONE的判断块内，请求未完成时object为undefined，会直接报错。
2. 循环变量冲突：外层和内层循环都使用i作为变量名，会覆盖变量值导致循环异常。
3. 单选按钮默认选中错误：所有选项都添加了checked="checked"，违反单选按钮的互斥规则（同一name下仅能有一个选中项）。
4. 结果获取逻辑错误：querySelector仅获取第一个单选按钮，且选择器语法错误（input[type="radio]缺少闭合引号），无法获取所有问题的选中结果。
5. 保存函数未触发：未绑定表单提交事件，save函数从未被调用。

修正后的完整代码： #

<form id="quiz"></form>
<script>
    let httpRequest = new XMLHttpRequest(); 
    httpRequest.open("GET", "quiz.json", true);
    httpRequest.send();
    httpRequest.addEventListener("readystatechange", function () {
        if (this.readyState === this.DONE) {
            const quizData = JSON.parse(this.response);
            console.log(quizData);

            const quizForm = document.getElementById("quiz");
            const questionKeys = Object.keys(quizData.quiz);

            // 遍历生成每个问题的DOM
            questionKeys.forEach((key, index) => {
                const questionItem = quizData.quiz[key];
                let questionHtml = `<div class="question-container">`;
                questionHtml += `<h2>Question ${index + 1}: ${questionItem.question}</h2>`;
                questionHtml += `<div class="options-container">`;
                
                // 遍历生成选项，仅第一个选项默认选中
                questionItem.options.forEach((option, optIndex) => {
                    const isChecked = optIndex === 0 ? 'checked' : '';
                    questionHtml += `<div class="option-item">`;
                    questionHtml += `<input type="radio" name="qzz_${key}_option" value="${option}" ${isChecked}>`;
                    questionHtml += `<label>${option}</label>`;
                    questionHtml += `</div>`;
                });

                questionHtml += `</div></div>`;
                quizForm.innerHTML += questionHtml;
            });

            // 添加提交按钮
            quizForm.innerHTML += `<input type="submit" value="提交">`;

            // 绑定表单提交事件
            quizForm.addEventListener('submit', function(e) {
                e.preventDefault(); // 阻止表单默认提交行为
                saveQuizResults(quizData);
                alert('答题结果已保存到LocalStorage');
            });
        }
    });

    // 保存答题结果到LocalStorage的函数
    function saveQuizResults(quizData) {
        const results = {};
        const questionKeys = Object.keys(quizData.quiz);

        questionKeys.forEach(key => {
            const selectedOption = document.querySelector(`input[name="qzz_${key}_option"]:checked`);
            results[key] = selectedOption ? selectedOption.value : '';
        });

        // 将结果对象转为JSON字符串保存（LocalStorage仅支持字符串存储）
        localStorage.setItem('quizResults', JSON.stringify(results));
    }
</script>

关键修正说明： #

• 异步逻辑修复：所有DOM生成代码放在请求完成的判断块内，确保quizData已正确获取。
• 循环变量优化：使用forEach遍历，避免变量名冲突，代码更易读。
• 单选按钮修正：仅给每个问题的第一个选项添加checked，保证同一问题下只有一个默认选中项。
• 结果获取逻辑：按问题的name属性分组获取选中选项，将所有结果整理为对象后转为JSON字符串存入LocalStorage。
• 提交事件绑定：给表单添加submit事件监听，阻止默认跳转并调用保存函数。

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