1

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?

2 respuestas 2

0

Yo realizaria cambios en el HTML y en el javascript de este modo:

  1. Encerraría en un elemento <span> tanto el input como el texto que le sigue de este modo:
<span><input type="radio" id="a1r1" name="a1">Dar un diagnostico profesional</span><br>

y así con todos los input.

  1. En el javascript lo haría de este otro modo:
function answerTeam() {
  var radios = document.querySelectorAll('input[name="a1"]')
  for (i = 0; i < radios.length; i++) {
    if (radios[i].id == "a1r3") {
      radios[i].parentNode.style.background = "green";
    } else {
      radios[i].parentNode.style.background = "red";
    }
  }
}

Es decir, recogería en un array todos los radiobuttons que tengan el mismo name mediante querySelectorAll(), para después irlos recorriendo uno a uno, en un bucle for, y mediante un condicional if, cuando se encuentre con la respuesta correcta, pintaría todo el span que lo envuelve de color verde gracias a parentNode, y si no lo es lo pintaría de rojo.

Aquí dejo un snippet de ejemplo:

function answerTeam() {
  var radios = document.querySelectorAll('input[name="a1"]')
  for (i = 0; i < radios.length; i++) {
    if (radios[i].id == "a1r3") {
      radios[i].parentNode.style.background = "green";
    } else {
      radios[i].parentNode.style.background = "red";
    }
  }
}
answerTeam()
<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) <span><input type="radio" id="a1r1" name="a1">Dar un diagnostico profesional</span><br>
B) <span><input type="radio" id="a1r2" name="a1">Evaluar al herido para medicarlo</span><br>
C) <span><input type="radio" id="a1r3" name="a1">Evitar nuevas lesiones o complicaciones</span><br> <!--CORRECTA-->
D) <span><input type="radio" id="a1r4" name="a1">Tratar lesiones y complicaciones</span><br>
E) <span><input type="radio" id="a1r5" name="a1">Diagnosticar su nivel de testosterona</span><br></p>

0

Los radio buttons no son editables como cualquier otro elemento, hay que hacerles lo que se diria un hack, lo logras con css, aqui te dejo para que lo agregues es tu hoja de estilo y lo puedas modificar a tu gusto. No hace falta hacer el cambio con javascript, la propiedad checked hace el cambio

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 3px;
  background-clip: content-box;
  border: 2px solid blue;
  background-color: blue;
  border-radius: 50%;
}
input[type="radio"]:checked {
  border: 2px solid red;
  background-color: red;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.