2

私は現在javascriptを学習しており、javascript_sourceで提供されている例に従って、ラジオボタンを使用してjavascriptでクイズを作成しようとしています 。現在、選択したラジオボタンのラベルの色をに基づいて赤または緑に変更したいという状況で立ち往生しています。選択された答え。

私は自分のコードを jsfiddleに入れましたが、どのブラウザでも動作させることができますが、なぜjsfiddleで動作しないように見えるのかわかりません。基本的な考え方は同じですが、色を変更したいだけです。正しいか間違っているかに基づいて選択されたラジオボタンのラベル。

これに関するどんな助けもありがたいです

**編集* jsfiddleは、以下のコメントのおかげで機能するようになりました

4

2 に答える 2

3

http://jsfiddle.net/aEeKt/8/を修正しました。私がしたことは、親を取得するために追加し、答えに応じてまたはクラスを<li>追加することだけでした。.correct.incorrect

HTML

<h3>Web Design Quiz</h3>

<form name="quiz">
1. What does CSS stand for?
<ul style="margin-top: 1pt">
  <li><input type="radio" name="q1" value="Colorful Style Symbols">Colorful Style Symbols</li>
  <li><input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
  <li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
</ul>

2. What does DHTML stand for?
<ul style="margin-top: 1pt">
  <li><input type="radio" name="q2" value="Dramatic HTML">Dramatic HTML</li>
  <li><input type="radio" name="q2" value="Design HTML">Design HTML</li>
  <li><input type="radio" name="q2" value="Dynamic HTML">Dynamic HTML</li>
</ul>
3. Who created Javascript?
<ul style="margin-top: 1pt">
  <li><input type="radio" name="q3" value="Microsoft">Microsoft</li>
  <li><input type="radio" name="q3" value="Netscape">Netscape</li>
  <li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
</ul>
4. What does CGI stand for?
<ul style="margin-top: 1pt">
  <li><input type="radio" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
  <li><input type="radio" name="q4" value="Common GIF Interface">Common GIF Interface</li>
  <li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
</ul>

<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear answers">
<p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
Correct answers:<br>
<textarea class="bgclr" name="solutions" wrap="virtual" rows="4" cols="30" disabled>
</textarea>
</form>

JavaScript </p> 

// Insert number of questions
var numQues = 4;

// Insert number of choices in each question
var numChoi = 3;

// Insert number of questions displayed in answer area
var answers = new Array(4);

// Insert answers to questions
answers[0] = "Cascading Style Sheets";
answers[1] = "Dynamic HTML";
answers[2] = "Netscape";
answers[3] = "Common Gateway Interface";

// Do not change anything below here ...

function getScore(form) {
    var score = 0;
    var currElt;
    var currSelection;
    for (i = 0; i < numQues; i++) {
    currElt = i * numChoi;
    for (j = 0; j < numChoi; j++) {
        currSelection = form.elements[currElt + j];
        cParent = currSelection.parentNode;
        if (currSelection.checked) {
        if (currSelection.value == answers[i]) {
            score++;
            cParent.className = 'correct';
            break;
        }else{
            cParent.className = 'incorrect';
        }
        }
    }
    }
    score = Math.round(score / numQues * 100);
    form.percentage.value = score + "%";
    var correctAnswers = "";
    for (i = 1; i <= numQues; i++) {
    correctAnswers += i + ". " + answers[i - 1] + "\r\n";
    }
    form.solutions.value = correctAnswers;
}​

CSS

li.correct{
    color: green;
}
li.incorrect{
    color: red;
}
​

</p>

于 2012-10-01T07:51:58.547 に答える
0

jsfiddle では、左側にさまざまな設定の列があります。[Choose Framework] のすぐ下に、デフォルトで [onLoad] に設定されているドロップダウン ボックスがあります。これにより、JavaScript をページに含めて実行する方法を選択できます。

「onLoad」を選択すると、宣言された関数または変数はグローバルになりません。ただし、使用onClick="getScore(this.form)"するには、関数がグローバルである必要があります。代わりに、「ラップなし (ヘッド)」または「ラップなし (ボディ)」のいずれかを選択する必要があります。

tl;dr

あなたの例がjsfiddleで動作するようにするには、左側のドロップダウンボックスから「ラップなし（ヘッド）」を選択してください。

于 2012-10-01T07:53:49.367 に答える