How to change text color inside the radiobutton?-CodePudding

I making a test and if answer is right i wanna change text color of checked radiobutton to green, else to red. Can I do this with code i have or should i change all structure.

HTML:

<div >   
    <h3>Quastion #1</h3>
     
    <div ><input name="q1" value="false" id="value1" type="radio" checked="checked" />
        <span class ="answer-text">
            Value 
        </span> 
    </div>
  
    <div ><input name="q1" value="true" id="value2" type="radio" />
        <span class ="answer-text">
            Value 
        </span>
    </div>
  
    <div ><input name="q1" value="false" id="value3" type="radio" />
        <span class ="answer-text">
            Value 
        </span> 
    </div>
</div>

JS:

var result = 0;
function check()

{
   var question;
   var choice;

   for (question = 1; question <= 10; question  ) {
      var rigth_anwswer;
      var q = document.forms['quiz'].elements['q' question];
      debugger;
      for (var i = 0; i < q.length; i  ) {
         if (q[i].checked) {
            choice = q[i].value;
            if (choice == "true") {
               result  ;
               //get span that contains text and change text color
            }
         }
      }
   }
   alert(result);
}

CodePudding user response：

If you want to change the text color, just use some simple HTML DOM styling:

if (choice == "true") {
  result  ;
  q[i].style.color = (whatever color you need it to be);
}

CodePudding user response：

You can also do it with css:-

<div >   
    <h3>Quastion #1</h3>
     
    <div ><input name="q1" value="false" id="value1" type="radio" checked="checked" />
        <span class ="answer-text">
            Value 
        </span> 
    </div>
  
    <div ><input name="q1" value="true" id="value2" type="radio" />
        <span class ="answer-text">
            Value 
        </span>
    </div>
  
    <div ><input name="q1" value="false" id="value3" type="radio" />
        <span class ="answer-text">
            Value 
        </span> 
    </div>
</div>

CSS:

input[name="q1"]:checked   span{
  color: red;
}

Working example:- https://codepen.io/rejownahmed/pen/GRddPXP