En esta práctica de JavaScript he puesto en práctica el acceso a los datos de los botones de radio de un formulario en HTML.
El usuario seleccionará un color y al pulsar sobre un párrafo éste cambiará al color seleccionado.
Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades checked y value en los botones de radio de un formulario en HTML. Como ayuda puedes echarle un vistazo a los siguientes enlaces:
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<form name="elegir">
<p><label><input type="radio" value="green" name="color">Verde</label></p>
<p><label><input type="radio" value="red" name="color">Rojo</label></p>
<p><label><input type="radio" value="blue" name="color">Azul</label></p>
<p><label><input type="radio" value="black" name="color">Negro</label></p>
</form>
<p id="parrafo">Elija un color y pulse sobre este texto.</p>
</body>
</html>Código CSS
* {
text-align: center;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("parrafo").addEventListener("click", info, false);
}
function info() {
let pulsado = document.elegir.color;
for(let i = 0; i < pulsado.length; i++) {
let valor = pulsado[i].checked;
if(valor == true) {
elegido = pulsado[i].value;
}
}
let cambio = document.getElementById("parrafo");
cambio.style.color = elegido;
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.