1

解決策を探してインターネットを検索しましたが、頭がいっぱいになりました。私はここ数週間 Javascript を試してきましたが、私の人生では、この新しいプロジェクトを機能させることはできません。

私の最初の目標は、クラスの 1 つで開発しているオンライン クイズの正しい答えをすべて太字にすることです。クラス名「Correct」でマークされた 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>
4

2 に答える 2

0

.correctすべてのラベルを確認するよりも、CSS で面倒な作業を行って、親クラスを 1 回切り替えるだけのほうがよいでしょう。

したがって、次の 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>
于 2013-04-18T08:26:57.420 に答える
0 
<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>
于 2013-04-18T06:07:14.930 に答える