Estoy haciendo un formulario con html y javascript, necesito que al momento de hacer click en el botón de retroalimentación los radio button cambien de color de tal manera que las respuestas incorrectas queden de color rojo y que la respuesta correcta quede de color verde.
Hice algo similar con unas celdas que inserte a una tabla con JavaScript
var aTable=document.getElementsByTagName('table')[0];
var newRow =aTable.insertRow(itsATable.rows.length);
var itscel1=newRow.insertCell(0);
var itscel2=newRow.insertCell(1);
var itscel3=newRow.insertCell(2);
itscel1.innerHTML=i;
itscel2.style.color=itscolor;
itscel2.innerHTML=anS1[numTeam];
itscel3.innerHTML=a1;
Lo cual me funciona.
Quise hacer lo mismo para el radiobutton de la siguiente manera.
HTML
<p>1/10<br>
<img src="https://cdn.pixabay.com/photo/2015/07/18/15/30/first-aid-850489_960_720.jpg" width="300" height="200">
<br>
¿Cual es uno de los objetivos principales de los <b>PRIMEROS AUXILIOS?</b><br>
A) <input type="radio" id="a1r1" name="a1">Dar un diagnostico profesional<br>
B) <input type="radio" id="a1r2" name="a1">Evaluar al herido para medicarlo<br>
C) <input type="radio" id="a1r3" name="a1">Evitar nuevas lesiones o complicaciones<br <!--CORRECTA-->
D) <input type="radio" id="a1r4" name="a1">Tratar lesiones y complicaciones<br>
E) <input type="radio" id="a1r5" name="a1">Diagnosticar su nivel de testosterona<br></p>
JAVASCRIPT
function answerTeam(){
//Código que se ejecuta al hacer click al botón retroalimentación
var radio = document.getElementById("a1r1");
radio.style.background="red";
}
(lo intente también con color y border) pero creo que es evidente que no me funciona, ¿Alguna manera en que pueda hacerlo?