estoy haciendo mis primeros programitas con JavaScript, y lo que me pasa es que cuando le doy al botón si se me cambia de color, pero quiero que cada vez que le de al botón se cambie el color sin recargar el navegador, he hecho un evento que cada vez que se pinche se cambie de color pero no me funciona y no sé por qué.
Codigo HTML:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./estilos.css">
</head>
<body>
<div id="contenedor_principal">
<h1>Color de fondo: </p>
<button type="submit" id="cambiar_color">Cambiar color</button>
</div>
<script src="./index.js"></script>
</body>
</html>
Codigo JS
let boton=document.querySelector("#cambiar_color");
let aleatorio1= Math.floor(Math.random() * (255+1-0) + 0);
let aleatorio2= Math.floor(Math.random() * (255+1-0) + 0);
let aleatorio3= Math.floor(Math.random() * (255+1-0) + 0);
let aleatorio4= Math.floor(Math.random() * (255+1-0) + 0);
// console.log("Ale1:",aleatorio1);
// console.log("Ale2: ",aleatorio2);
// console.log("Ale3: ",aleatorio3);
// console.log("Ale4: ",aleatorio4);
boton.addEventListener("click", ()=>
{
document.body.style.backgroundColor=`rgba(${aleatorio1}, ${aleatorio2}, ${aleatorio3}, ${aleatorio4})`;
});
Gracias un saludo!