0

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!

3 respuestas 3

3

No te funciona porque antes de llamar al botón ya has definido los colores.

Para redefinirlos en cada click debes ponerlos dentro de la función, así:

let boton=document.querySelector("#cambiar_color");
boton.addEventListener("click", ()=>
    {
        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);
        document.body.style.backgroundColor=`rgba(${aleatorio1}, ${aleatorio2}, ${aleatorio3}, ${aleatorio4})`;
    });
<!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>

2
  • Gracias Crack!!!
    – Pablo FC
    Commented el 15 mar. 2022 a las 11:02
  • 1
    De nada, me alegro que pueda servirte. Te ruego aceptes la respuesta que más te ha convenido para que esta pregunta no quede pendiente para siempre y pueda ser útil para otros que se encuentren en la misma situación que tu. Puedes aprender a aceptar respuestas mirando este enlace , y para aprender que hacer cuando alguien responde puedes mirar este otro enlace. Se agradecen los agradecimientos, claro, pero en este sitio se demuestran votando y aceptando las respuestas que más te han servido.
    – masterguru
    Commented el 15 mar. 2022 a las 11:06
3

tus variables aleatorias que dan el color las tienes cargadas una vez al momento de cargar el script, el unico codigo dinamico que tienes es el onclick, ahi debes redefinir tus variables

let boton=document.querySelector("#cambiar_color");

function getRand(){
return Math.floor(Math.random() * (255+1-0) + 0)
}
 boton.addEventListener("click", ()=>
    {
        document.body.style.backgroundColor=`rgba(${getRand()}, ${getRand()}, ${getRand()}, ${getRand()})`;
    });
<!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="button" id="cambiar_color">Cambiar color</button>

    </div>

    <script src="./index.js"></script>
</body>
</html>

1
  • 1
    Gracias!!! 🙌🙌
    – Pablo FC
    Commented el 15 mar. 2022 a las 11:01
-2

Me creerias si te digo, que en vez de utilizar el

<button type="submit" id="cambiar_color">Cambiar color</button>

utiliza el

<button type="button" id="cambiar_color">Cambiar color</button>

Verás, el submit hace el posteo del formulario, por eso es el refresh del navegador

1
  • Gracias por el aporte. En este caso no hay formulario y tanto da si es submit (sin formulario <form> no hace nada) como button pues lo que hace es capturar el evento click sobre el mismo. Aunque no está de más recordárselo por si lo acaba poniendo en un formulario.
    – masterguru
    Commented el 14 mar. 2022 a las 18:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.