html - how to change color of text following functi...

http://stackoverow.com/questions/2744768/how-...

Stack Overow works best with JavaScript enabled

how to change color of text following function in javascript

Ok before i make spaghetti of this code i thought id ask around here. ive made a quiz for an online site. The answers are stored in an array, and ive a function that checks the answers array to what youve clicked. then it counts them and gives you your score. but i want to change the clor of the right answer wen the user clicks the score button. so the correct answers are highlighted. something like this https://www.shutterpoint.com/Home-Quiz.cfm (just hit submit at the bottom, no need to do the quiz). the little answer icon at the side looks flashy but id rather just have the text change color. heres how my questions are formatted <p>Film speed refers to:</p> <p id = "question1"> <input type="radio" name="question1" <input type="radio" name="question1" <input type="radio" name="question1" <input type="radio" name="question1"

id="Wrong" value = "a" onClick = "recordAnswer(1,this.value) id="Wrong" value = "b" onClick = "recordAnswer(1,this.value) id="Answer" value = "c" onClick = "recordAnswer(1,this.value id="Wrong" value = "d" onClick = "recordAnswer(1,this.value)

and these are the two functions that are called throughout. record answer is called every time the user clicks a button function recordAnswer(question,answer) { answers[question-1] = answer; } this is the final button which calculates the score function scoreQuiz() { var totalCorrect = 0; for(var count = 0; count<correctAnswers.length;count++) { if(answers[count]== correctAnswers[count]) totalCorrect++; } <!-alert("You scored " + totalCorrect + " out of 12 correct!"); --> } another function is best i think. ive already made attempts at it and know i have to set the color using document.getElementById('Answer').style.color = '#0000ff'; onyl problem is 'Answer' doesnt seem to be registering. anyone shed some light?

ok so i cant have two or more of the same ids. what about

1 of 4

21.09.2012 10:39

html - how to change color of text following functi...

http://stackoverow.com/questions/2744768/how-...

Stack Overow works best with JavaScript enabled

{ // change the color. }
javascript html colors radio

edited Apr 30 '10 at 13:56

asked Apr 30 '10 at 13:24 OVERTONE 698 7 18 92% accept rate

You are not allowed to have two or more elements with the same id . RoToRa Apr 30 '10 at 13:50 damn. wasnt aware of that. any suggestions? OVERTONE Apr 30 '10 at 13:54

feedback

4 Answers
QUICK RESPONCE: USE <P> <p> <input type="radio" name="question_1" class="wrong" value="a" /> How long it takes to develop film. </p> THEN if(value == correctAnswers[]) { YOUR_ELEMENT.parentNode.style.color = 'green'; } IMPROVEMENT DEMO: http://jsbin.com/aceze/26 hi Overtone! first of all you need to restyle a litte your HTML schema! you have multiple id="Wrong" instead of class="Wrong" then here how your code should look: var answers = { 1:'a' , 2:'f' , 3:'h' }; function checkQuestions() { var form_elements = document.question_form.elements.length; for ( var i = 0; i < form_elements; i++ ) { var type = question_form.elements[i].type; if ( type == "radio" ){ var quest = question_form.elements[i]; //if ( quest.checked ) { var question_index = parseInt(quest.name.split('_')[1]); //} if ( quest.value == answers[question_index] ) { quest.parentNode.style.border = '1px solid green'; quest.parentNode.style.color = 'green'; } else { //quest.parentNode.style.border = '1px solid red'; quest.parentNode.style.color = 'red'; } }

2 of 4

21.09.2012 10:39

html - how to change color of text following functi...

http://stackoverow.com/questions/2744768/how-...

Stack Overow works best with JavaScript enabled

USE a FORM and one time SUBMIT BUTTON instead of adding onclick to each RADIO like this <form name="question_form" id="question_form" method="POST" action='#'> <div id="question_1"> <H4>QUESTIONS TIME 1</H4> </div> <p> <input type="radio" name="question_1" class="wrong" value="a" /> How long it takes to develop film. </p> <p> <input type="radio" name="question_1" class="wrong" value="b" /> How fast film moves through film-transport system. </p> <p> <input type="radio" name="question_1" class="answer" value="c" /> How sensitive the film is to light. </p> <p> <input type="radio" name="question_1" class="wrong" value="d" /> None of these makes sense. </p> ... ... <input type="radio" name="question_2" class="wrong" value="h" /> <span>None of these makes sense. </span> </p> <input type="submit" name="submit" onclick="checkQuestions();return false;" value="submit"/ </form> PS: demo example updated with style... for sake!
edited May 1 '10 at 7:49 answered Apr 30 '10 at 15:49 aSeptik 13k 2 20 35

feedback

You should format your id s in a more usable way.. I'd suggest something similar to questionNUMBER_answerVALUE . Then it'd be a simple matter of... for (var i=0; i<correctAnswers;i++) { document.getElementById("question" + (i+1) + "_answer" + correctAnswers[i].toUpperCase()).style }; Just check I've got your zero/non-zero indexing correct with regard to question/ answer numbers.
answered Apr 30 '10 at 13:38 Matt 25.1k 6 24 47 new versions up. id has been changed to those with being correct and thos that are wrong. any idea how id change the color using your for loop? i can kinda see what your doing. OVERTONE Apr 30 '10 at 13:51

feedback

Instead of using a <p> I would consider using a <label for='question1_answerA'>How long it takes to develop film.</label> . You can still use a jQuery selector to find it and it feels more

3 of 4

21.09.2012 10:39

html - how to change color of text following functi...

http://stackoverow.com/questions/2744768/how-...

Stack Overow works best with JavaScript enabled

Although your other HTML isn't semantically correct. You need to give each radio a unique ID.
edited Apr 30 '10 at 16:15 answered Apr 30 '10 at 16:07 Mark 3,430 1 18 31

feedback

Obligatory jquery solution: var highlightCorrect = function(){ $(".Answer").css("color", "#00FF00"); } This is all assuming that you fix your HTML to use classes rather than IDs for "Wrong" and "Answer".
answered Apr 30 '10 at 15:54 Aaron 165 10 feedback

Not the answer you're looking for? Browse other questions tagged javascript html
colors radio or ask your own question.

question feed

4 of 4

21.09.2012 10:39