javascript - 使用Javascript将fontWeight的CSS属性应用于单选按钮的标签标签

Question

我在网上搜索了解决方案，但我已经无计可施了。我已经尝试了 Javascript 几个星期了，但我一生都无法让这个新项目发挥作用。

我的最初目标是将我为我的一门类(class)开发的在线测验的所有正确答案加粗。我可以使用 CSS 轻松地将正确答案加粗，并标有“正确”的类名，但我无法让 Javascript 执行命令来通过单击按钮执行相同的操作。

如果有人能帮我解决这个问题，我将不胜感激。 ClearCorrectAnswers() 函数旨在反转 ShowCorrectAnswers() 的效果。

我一直在开发的 JavaScript 可以在下面找到:

function ShowCorrectAnswers() {
    var correctAnswers = document.getElementsByClassName("Correct");

    for (var count = 0; count < correctAnswers.length; count++) {
        correctAnswers[count].style.fontWeight = "bold";
    }
}

function ClearCorrectAnswers() {
    var correctAnswers = document.getElementByClassName("Correct");

    for (var count = 0; count < correctAnswers.length; count++) {
        correctAnswers[count].style.fontWeight = "normal";
    }
}

同样可以在下面找到 HTML:

<input type="submit" value="Submit Test" onClick="ComputeGrade()">
<button type="button" onClick="ShowCorrectAnswers()">Show Correct Answer</button>
<button type="button" onClick="ClearCorrectAnswers">Clear Correct Answer</button>
<p>1. The external behavior of a system is described by _____.
    <br>
    <input type="radio" id="1" name="As1" value="1">
    <label class="Correct">A. functional models</label>
    <br>
    <input type="radio" id="2" name="As1" value="0">
    <label>B. structural models</label>
    <br>
    <input type="radio" id="3" name="As1" value="0">
    <label>C. behavioral models</label>
    <br>
    <input type="radio" id="4" name="As1" value="0">
    <label>D. interaction diagrams</label>
    <br>
    <input type="radio" id="5" name="As1" value="0">
    <label>E. statechart diagrams</label>
</p>
<p>2. An analyst depicts the static view of an information system with _____.
    <br>
    <input type="radio" name="As2" value="0">
    <label>
        <label>A. use-case models</label>
        <br>
        <input type="radio" name="As2" value="1">
        <label class="Correct">B. structural models</label>
        <br>
        <input type="radio" name="As2" value="0">
        <label>C. behavioral models</label>
        <br>
        <input type="radio" name="As2" value="0">
        <label>D. interaction diagrams</label>
        <br>
        <input type="radio" name="As2" value="0">
        <label>E. statechart diagrams</label>
</p>
<p>3. The two types of interaction diagrams are ______________ diagrams.
    <br>
    <input type="radio" name="As3" value="0">
    <label>A. use-case and sequence</label>
    <br>
    <input type="radio" name="As3" value="0">
    <label>B. class and sequence</label>
    <br>
    <input type="radio" name="As3" value="1">
    <label class="Correct">C. sequence and communication</label>
    <br>
    <input type="radio" name="As3" value="0">
    <label>D. object and communication</label>
    <br>
    <input type="radio" name="As3" value="0">
    <label>E. statechart and object</label>
</p>

Answer 1

<script>
function ShowCorrectAnswers() {
    var correctAnswers = document.getElementsByClassName("Correct");

    for (var count = 0; count < correctAnswers.length; count++) {
        correctAnswers[count].style.fontWeight = "bold";
    }
}

function ClearCorrectAnswers() {

    var correctAnswers = document.getElementsByClassName("Correct");

    for (var count = 0; count < correctAnswers.length; count++) {
        correctAnswers[count].style.fontWeight = "normal";
    }
}
</script>

和 HTML:

<input type="submit" value="Submit Test" onClick="ComputeGrade()">
<button type="button" onClick="ShowCorrectAnswers()">Show Correct Answer</button>
<button type="button" onClick="ClearCorrectAnswers()">Clear Correct Answer</button>

<p>1. The external behavior of a system is described by _____.<br>
    <input type="radio" id="1" name="As1" value="1"><label class="Correct"> A. functional models</label><br>
    <input type="radio" id="2" name="As1" value="0"><label> B. structural models</label><br>
    <input type="radio" id="3" name="As1" value="0"><label> C. behavioral models</label><br>
    <input type="radio" id="4" name="As1" value="0"><label> D. interaction diagrams</label><br>
    <input type="radio" id="5" name="As1" value="0"><label> E. statechart diagrams</label>
</p>


<p>2. An analyst depicts the static view of an information system with _____.<br>
    <input type="radio" name="As2" value="0"><label><label> A. use-case models</label><br>
        <input type="radio" name="As2" value="1"><label class="Correct"> B. structural models</label><br>
        <input type="radio" name="As2" value="0"><label> C. behavioral models</label><br>
        <input type="radio" name="As2" value="0"><label> D. interaction diagrams</label><br>
        <input type="radio" name="As2" value="0"><label> E. statechart diagrams</label>
</p>

<p>3. The two types of interaction diagrams are ______________ diagrams.<br>
    <input type="radio" name="As3" value="0"><label> A. use-case and sequence</label><br>
    <input type="radio" name="As3" value="0"><label> B. class and sequence</label><br>
    <input type="radio" name="As3" value="1"><label class="Correct"> C. sequence and communication</label><br>
    <input type="radio" name="As3" value="0"><label> D. object and communication</label><br>
    <input type="radio" name="As3" value="0"><label> E. statechart and object</label>
</p>