En esta práctica de JavaScript he puesto en práctica el uso del condicional de tipo switch(), la forma de acceder y modificar el estilo de un elemento HTML (DOM) y el uso del método random() de la clase Math en este lenguaje de programación.
Cada vez que pulsemos en el botón "Cambiar color" cambiará el color de fondo de una caja. El color será generado de forma aleatoria.
Para poder comprender el código de esta práctica es muy importante que comprendas que es el DOM, conocer la forma de acceder a los elementos del DOM y a los atributos de dichos elementos, así como conocer cómo funciona el método random() de la clase Math en JavaScript. 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>
<div id="caja"></div>
<p><input type="button" id="boton" value="Cambiar color"></p>
</body>
</html>Código CSS
*{
text-align: center;
}
#caja{
width: 400px;
height: 400px;
margin: 40px auto;
border: 2px solid black;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("boton").addEventListener ('click',cambiarColor, false);
}
function cambiarColor() {
let caja = document.getElementById("caja");
let num = numeroAleatorio(1, 5);
let colores=["green","blue","red","yellow","black"];
caja.style.backgroundColor=colores[num];
}
//FUNCIÓN PARA OBTENER UN NUMERO ALEATORIO ENTRE UN RANGO DE NÚMEROS
function numeroAleatorio(primerValor, ultimoValor) {
let opciones = ultimoValor - primerValor + 1;
return Math.floor(Math.random() * opciones + primerValor);
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.