JavaScript实现按钮选择题与文本答题功能异常问题求助

一、核心问题汇总 #

• 两类题都用了submit类型的按钮，点击后会触发表单提交刷新页面，所有JS修改的样式和内容都会被重置消失
• 选择题存在的专项问题：
  1. type="submit"的按钮没有checked属性，if (document.getElementById('option-xx').checked)的判断永远不成立
  2. 多个span元素重复使用id="block-12"，ID是唯一标识不能重复
  3. showCorrectAnswer4函数变量名拼写错误，且页面不存在id="showanswer4"的容器，执行会直接报错
• 文本题存在的专项问题：
  1. 代码里获取的是输入框的value（字符串类型），字符串没有style和innerHTML属性，修改必然失败
  2. 没有预留提示文本的展示容器

二、修复后的完整代码 #

1. index.html 代码 #

<!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>
    <script>
        // 选择题判断逻辑
        function displayAnswer1(selectId, isCorrect) {
            // 阻止默认提交行为
            event.preventDefault();
            const block = document.getElementById(`block-${selectId}`);
            const result = document.getElementById(`result-${selectId}`);
            const btn = document.getElementById(`option-${selectId}`);
            if (isCorrect) {
                block.style.border = '3px solid limegreen';
                btn.style.backgroundColor = 'limegreen';
                result.style.color = 'limegreen';
                result.innerHTML = 'Correct!';
            } else {
                block.style.border = '3px solid red';
                btn.style.backgroundColor = 'red';
                result.style.color = 'red';
                result.innerHTML = 'Incorrect!';
            }
        }
        
        // 文本题判断逻辑
        function myfun(){
            event.preventDefault();
            const input = document.getElementById('answer-input');
            const result = document.getElementById('text-result');
            const userInput = input.value.trim();
            if(userInput === "Blue"){
                input.style.color = 'green';
                result.style.color = 'green';
                result.innerHTML = 'Correct!';
            } else {
                input.style.color = 'red';
                result.style.color = 'red';
                result.innerHTML = 'Incorrect!';
            }
        }
    </script>
</head>
<body>
    <div class="jumbotron">
        <h1>Trivia!</h1>
    </div>
    <div class="container">
        <div class="section">
            <h2>Part 1: Multiple Choice </h2>
            <hr>
            <h3>What is my first name?</h3>
            <form method='GET'>
                <span id='block-11' style='padding: 10px; display: inline-block; margin: 10px 0;'>
                    <label for='option-11' style='padding: 5px; font-size: 2.5rem;'>
                      <input type='submit' value='Zahra' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' onclick="displayAnswer1('11', false)"/>
                      </label>
                    <span id='result-11' style="margin-left: 10px;"></span>
                </span>
                <br>
                <span id='block-12' style='padding: 10px; display: inline-block; margin: 10px 0;'>
                    <label for='option-12' style='padding: 5px; font-size: 2.5rem;'>
                      <input type='submit' value='Melika' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' onclick="displayAnswer1('12', false)"/>
                      </label>
                    <span id='result-12' style="margin-left: 10px;"></span>
                </span>
                <br>
                <span id='block-13' style='padding: 10px; display: inline-block; margin: 10px 0;'>
                    <label for='option-13' style='padding: 5px; font-size: 2.5rem;'>
                      <input type='submit'  value='Aysa' id='option-13' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' onclick="displayAnswer1('13', false)"/>
                      </label>
                    <span id='result-13' style="margin-left: 10px;"></span>
                </span>
                <br>
                <span id='block-14' style='padding: 10px; display: inline-block; margin: 10px 0;'>
                    <label for='option-14' style='padding: 5px; font-size: 2.5rem;'>
                      <input type='submit'  value='Aylin' id='option-14' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' onclick="displayAnswer1('14', true)"/>
                      </label>
                    <span id='result-14' style="margin-left: 10px;"></span>
                </span>
             </form>
        </div>
        <div class="section">
            <h2>Part 2: Free Response</h2>
            <hr>
            <h3>What is my favorite color?</h3>
                <form id="form">
                    <input type="text" name="q" id="answer-input">
                    <input type="submit" value="Check Answer" onclick="myfun()">
                    <span id="text-result" style="margin-left: 10px;"></span>
                </form>
        </div>
    </div>
</body>
</html>

2. style.css 代码无需修改，可直接沿用原有代码 #

三、修复说明 #

• 所有点击事件都加了event.preventDefault()阻止表单默认提交行为，页面不会再刷新
• 选择题直接通过传参判断对错，省去了冗余的重复判断代码，同时修复了ID重复的问题
• 文本题先获取输入框元素本身再修改样式，新增了提示文本容器，能正常展示对错提示
• 直接修改选项按钮的背景色，符合预期的点击变色效果

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