CODEWITHSUNDEEP
javascripthtmlcss
Abida
Abida

Reputation: 233

Changing the color of the label of a selected radio button in javascript

I am currently learning javascript and am trying to make a quiz in javascript with radiobuttons by following the example provided in javascript_source.I am right now stuck in a situation where i would like the selected radiobuttons label color to be changed to red or green based on the answer selected.

I have put my code in jsfiddle , i am able to get it to work in ny browser, but i dont know why it doesnt seem to work in jsfiddle, the basic idea is the same , only i would like to change the color of the selected radio button label based on correct or wrong.

Any help regarding this would be grateful

**EDIT * jsfiddle now works thanks to the comments below

Upvotes: 2

Views: 3558

Answers (2)

grc
grc

Reputation: 23545

In jsfiddle, there is a column on the left with various settings. Just under 'Choose Framework', there is a dropdown box that defaults to 'onLoad'. This allows you to choose how your javascript is included and executed in the page.

When you choose 'onLoad', any functions or variables declared will not be global. However, using onClick="getScore(this.form)" requires the function to be global. Instead, you should choose either 'no wrap (head)' or 'no wrap (body)'.

tl;dr

Choose 'no wrap (head)' from the dropdown box on the left for your example to work in jsfiddle.

Upvotes: 0

Henrik Ammer
Henrik Ammer

Reputation: 1899

Fixed it, http://jsfiddle.net/aEeKt/8/. What I did was just add to get the parent <li> and add a .correct or .incorrect class to it depending on the answer.

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

​

Upvotes: 3

Related Questions