Question

0

73

Vistas

radio button change text color

I am new at javascript,and i was trying and trying with this but something is wrong,i wanna make the checked radio button red, black, green and blue but I don't know how to use JavaScript

<table>
  <B id="grandezza1">Colore Testo :</B>
</table>
<p style="color:blue" id="colore">
  <br> Nero &nbsp
  <INPUT type="radio" name="colore" value="Nero" onclick="cambiaColore()" checked>
  <BR> Rosso
  <INPUT type="radio" name="colore" value="Rosso" onclick="cambiaColore()">
  <BR> Verde
  <INPUT type="radio" name="colore" value="Verde" onclick="cambiaColore()">
  <BR> Blue &nbsp
  <INPUT type="radio" name="colore" value="Blue" onclick="cambiaColore()">
  <BR>
</P>

function cambiaColore(){
    document.getElementById("area").style.color = $('input[name="radioC"]:checked').val();
}

5 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T16:47:08.386Z

You cannot change the colour of a radio button. You can change the colour of the label

In your code, you are mixing DOM (document....) with jQuery ($(...)) that is not a great idea. You were also missing the jQuery library.

Also your name was colore and not radioC

Here I delegate the click from the container

I also fixed your invalid HTML.

const cambiaColore = () => {
  document.querySelectorAll("#colore input[type=radio]").forEach(rad => rad.closest("label").classList.toggle(rad.value, rad.checked))
}
document.getElementById("colore").addEventListener("click", cambiaColore);
cambiaColore(); // initialise

.Nero {
  background-color: black;
  color: white
}

.Rosso {
  background-color: red;
  color: yellow
}

.Verde {
  background-color: green;
  color: yellow
}

.Blu {
  background-color: blue;
  color: yellow
}

<b id="grandezza1">Colore Testo :</b>

<p style="color:blue" id="colore">
  <label>Nero <input type="radio" name="colore" value="Nero" checked /></label><br/>
  <label>Rosso <input type="radio" name="colore" value="Rosso" /></label><br/>
  <label>Verde <input type="radio" name="colore" value="Verde" /></label><br/>
  <label>Blu <input type="radio" name="colore" value="Blu" /></label><br/>
</p>