Soy un principiante en la codificación (así que perdónenme si este problema tiene una solución fácil de resolver), pero estoy tratando de crear un cambio de color que cambie el fondo de una página web cada vez a un color aleatorio cuando el botón "generar" se hace clic. No pude averiguar cómo configurar el botón, así que revisé un tutorial sobre cómo hacerlo. El código entre el tutorial y mi versión es el mismo, pero después de hacer clic en "generar" en la página web una vez, nunca vuelve a cambiar el fondo. A continuación se muestra el código para el botón:
<main> <div class="container"> <h1>color flipper</h1> <h2>press the button to generate a random color.</h2> <h3> color: <span class="color">#000000</span></h3> <button class="btn btn-hero" id="btn">generate</button> </div> </main> <script> const btn = document.getElementById("btn") const color = document.querySelector(".color") let a = Math.floor(Math.random() * 256) let b = Math.floor(Math.random() * 256) let c = Math.floor(Math.random() * 256) let colors = `rgb(${a}, ${b}, ${c})` btn.addEventListener('click', () => { document.body.style.backgroundColor = colors color.textContent = colors }) </script>Los colores aleatorios son siempre los mismos, necesitas regenerarlos:
const btn = document.getElementById("btn") const color = document.querySelector(".color") function generate() { let a = Math.floor(Math.random() * 256) let b = Math.floor(Math.random() * 256) let c = Math.floor(Math.random() * 256) let colors = `rgb(${a}, ${b}, ${c})` document.body.style.backgroundColor = colors color.textContent = colors } btn.addEventListener('click', () => { generate() }) <main> <div class="container"> <h1>color flipper</h1> <h2>press the button to generate a random color.</h2> <h3> color: <span class="color">#000000</span></h3> <button class="btn btn-hero" id="btn">generate</button> </div> </main>Cada vez que se hace clic en btn , debe asegurarse de que se genere un nuevo color cada vez. Esto se logra colocando la lógica de generación de color dentro de la devolución de llamada del detector de eventos.
const btn = document.getElementById("btn") const color = document.querySelector(".color") btn.addEventListener('click', () => { let a = Math.floor(Math.random() * 256) let b = Math.floor(Math.random() * 256) let c = Math.floor(Math.random() * 256) let colors = `rgb(${a}, ${b}, ${c})` document.body.style.backgroundColor = colors color.textContent = colors }) <main> <div class="container"> <h1>color flipper</h1> <h2>press the button to generate a random color.</h2> <h3> color: <span class="color">#000000</span></h3> <button class="btn btn-hero" id="btn">generate</button> </div> </main>