En esta práctica de JavaScript he puesto en práctica el acceso a los datos de una lista desplegable de un formulario en HTML.
El usuario seleccionará un tipo de letra de una lista y al pulsar sobre un botón se le mostrará un texto con el tipo de letra seleccionada aplicada y otro texto con el nombre de la fuente de letra seleccionada.
NOTA: dependiendo de si usted tiene instaladas o no en su dispositivo las fuentes de letras usadas en esta práctica, podrá observar los cambios de tipo de letra aplicados o no observarlos.
Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades selectedIndex, options y text en las listas desplegables 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="tipoLetra"<
<h2<Elija el tipo de letra y después pulse el botón para cambiarla.</h2<
<select name="fuente" id="fuente"<
<option value="arial">Arial</option>
<option value="times new roman">Times New Roman</option>
<option value="comic sans ms">Comic Sans MS</option>
<option value="courier new">Courier New</option>
<option value="verdana">Verdana</option>
<option value="garamond">Garamond</option>
</select>
<p><input type="button" name="boton" id="boton" value="Cambiar tipo de letra"></p>
</form>
<p>Este es el tipo de letra seleccionada que se muestra ahora en la página.</p>
<h3 id="texto">Aún no ha seleccionado un tipo de letra. Se muestra el tipo de letra por defecto.</h3>
</body>
</html>Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("boton").addEventListener("click", tipoLetra, false);
}
function tipoLetra() {
let lista = document.tipoLetra.fuente;
let seleccionada = lista.selectedIndex;
let opcion = lista.options[seleccionada];
let fuente = opcion.value;
let texto = opcion.text;
document.body.style.fontFamily = fuente;
let escribe = document.getElementById("texto");
escribe.innerHTML = texto;
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.