如何用JS实现HTML测验表单答案标绿标红及失效代码排查

• 方法调用层级错误：getElementById()是全局document对象提供的原生方法，不属于document.forms表单集合，原写法会直接触发document.forms.getElementById is not a function的浏览器报错，根本无法执行样式设置逻辑。
• 样式作用目标错误：即使修正方法调用，拿到的也只是带id="correct"的单选框控件。给input控件设置文字颜色，只会改变控件自身的渲染效果，不会影响input标签外的兄弟节点纯文本（即每个选项后面的说明文字，根本不属于input的内部内容，无法继承input的样式）。
• HTML规范违反：代码中给5个单选框重复设置了同一个id="correct"，而HTML规范要求同一页面内id值必须唯一。此时即使用document.getElementById('correct')选择元素，也只会返回文档中第一个匹配的元素，其余4个正确选项完全无法被选中设置样式。

第一步：调整HTML结构 #

将每个选项的input和对应文本包裹在<label>标签内，同时把原来重复的id="correct"替换为可复用的类名correct-answer，用于标记所有正确选项：

<section>
    <form name="formulaire" >
        <h3>1. Le rôle du HTML est de : </h3>
        <label><input type="radio" name="question1" value="a">  a. Mettre en forme du texte </label><br/>
        <label><input type="radio" name="question1" value="b" class="correct-answer">  b. Structurer un document </label><br/>
        <label><input type="radio" name="question1" value="c">  c. Lier un document à une feuille de style </label><br/>

        <h3>2. Pour définir un titre dans une page HTML, on utilise : </h3>
        <label><input type="radio" name="question2" value="a" class="correct-answer">  a. La balise title </label><br/>
        <label><input type="radio" name="question2" value="b">  b. La balise titre </label><br/>
        <label><input type="radio" name="question2" value="c">  c. La balise head </label><br/>

        <h3>3. A quoi sert l'attribut alt de la balise img ? </h3>
        <label><input type="radio" name="question3" value="a">  a. A afficher une deuxième image si la première ne peut pas s'afficher </label><br/>
        <label><input type="radio" name="question3" value="b">  b. A donner un lien alternatif vers l'image si le premier est cassé </label><br/>
        <label><input type="radio" name="question3" value="c" class="correct-answer">  c. A donner une description de l'image si celle-ci ne peut pas s'afficher </label><br/>

        <h3>4. p{background-color : #000;} permet de définir : </h3>
        <label><input type="radio" name="question4" value="a">  a. La couleur de la police du paragraphe </label><br/>
        <label><input type="radio" name="question4" value="b" class="correct-answer">  b. La couleur du fond du paragraphe </label><br/>
        <label><input type="radio" name="question4" value="c">  c. Aucun des deux </label><br/>

        <h3>5. Laquelle de ces syntaxes est correcte pour écrire un commentaire en JavaScript ? </h3>
        <label><input type="radio" name="question5" value="a" class="correct-answer">  a. // Commentaire </label><br/>
        <label><input type="radio" name="question5" value="b">  b. / Commentaire / </label><br/>
        <label><input type="radio" name="question5" value="c">  c. &lt;!-- Commentaire--&gt; </label><br/>

        <br/>
        <input type="submit" value="Valider" onclick="return validation()">
    </form>
</section>

这种结构调整的额外收益是，用户点击选项文本也可以直接选中对应单选框，是HTML原生的无障碍交互能力，无需额外JS绑定事件。

第二步：实现样式逻辑 #

有两种原生实现方式，可任选其一：

方式1：纯CSS实现（无需写JS） #

利用原生CSS的:has()选择器，直接匹配包含正确/错误单选框的label元素，设置对应文本颜色：

/* 正确选项文本设为绿色 */
label:has(> input.correct-answer) {
  color: green;
}
/* 错误选项文本设为红色 */
label:has(> input:not(.correct-answer)) {
  color: red;
}

该方案所有现代浏览器（Chrome、Edge、Safari 15.4+）均已支持，完全符合原生开发要求。

方式2：原生JS实现 #

如果需要兼容不支持:has()选择器的老旧浏览器，可以编写极简JS逻辑，在DOM加载完成后遍历设置样式：

// 等待页面DOM加载完成后执行，避免元素未渲染时获取不到节点
document.addEventListener('DOMContentLoaded', () => {
  // 给所有正确选项设置绿色
  document.querySelectorAll('.correct-answer').forEach(inputEl => {
    inputEl.parentElement.style.color = 'green';
  })
  // 给所有错误选项设置红色
  document.querySelectorAll('input[type="radio"]:not(.correct-answer)').forEach(inputEl => {
    inputEl.parentElement.style.color = 'red';
  })
})

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