使用 Javascript 將 fontWeight 的 CSS 屬性應用到單選按鈕的 label 標簽

Question

我在互聯網上搜索了一個解決方案，我已經無能為力了。 我已經用 Javascript 進行了幾個星期的試驗，但對於我來說，我無法讓這個新項目工作。

我最初的目標是為我為我的一門課程開發的在線測驗的所有正確答案加粗。 我可以很容易地使用 CSS 將正確答案加粗，標記為“正確”的 class 名稱，但我不能讓 Javascript 在單擊按鈕處執行相同的命令。

如果有人可以幫助我解決這個問題，將不勝感激。 ClearCorrectAnswers() function 旨在反轉 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>

Answer 2

您最好在 CSS 中進行艱苦的工作，並且只需切換父 class 一次，而不是遍歷每個.correct 。

所以，假設你有這個 HTML：

<form id="quiz">
    ...
</form>

你會有這個 CSS 某處：

<style>
#quiz.showAnswers .correct {
    font-weight: bold;
}
</style>

而這個 JavaScript：

<script>
function showCorrectAnswers () {
    document.getElementById('quiz').className = 'showAnswers';
}

function clearCorrectAnswers () {
    document.getElementById('quiz').className = '';
}
</script>