2012-10-01 68 views
2

我目前正在學習javascript,並試圖通過按照javascript_source中提供的示例在單選按鈕上進行JavaScript測驗。我現在陷入了一種情況,希望根據所選答案將選定的單選按鈕標籤顏色更改爲紅色或綠色。在javascript中更改所選單選按鈕的標籤的顏色

我已經把我的代碼放在jsfiddle,我能夠在ny瀏覽器中使用它,但我不知道它爲什麼看起來不能在jsfiddle中工作,基本的想法是一樣的,只有我想改變基於正確或錯誤的所選單選按鈕標籤的顏色。

任何有關此幫助將不勝感激

* *編輯* 的jsfiddle現在的作品由於固定它,http://jsfiddle.net/aEeKt/8/下面

+2

更新小提琴的作品(雖然與顏色雖然),http://jsfiddle.net/aEeKt/6/ –

+0

感謝這似乎很好....正在與最後一個掙扎! :) –

+0

問題是getScore在他的例子中不存在作爲函數,但你是如何修復它的?我知道這非常簡單,但我無法看到:p – alexandernst

回答

3

的意見。我所做的只是添加獲得父母<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

// 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; 
} 
​ 

0

在jsfiddle中,左邊有一列有各種設置。在「選擇框架」下面,有一個默認爲「onLoad」的下拉框。這使您可以選擇如何在頁面中包含和執行JavaScript。

當您選擇'onLoad'時,聲明的任何函數或變量將不是全局的。但是,使用onClick="getScore(this.form)"要求該功能是全局的。相反,你應該選擇「無包裹(頭)」或「無包裹(身體)」。

TL;博士

從左邊的下拉框爲您的示例中的jsfiddle運作,請選擇「不包(頭)」。