I'm a beginner at coding (so forgive me if this problem has an easily solvable solution), but I'm trying to create a color flipper that changes the background of a webpage each time to a random color when the "generate" button is clicked. I couldn't figure out how to configure the button, so I checked a tutorial on how to do so. The code between the tutorial and my version is the same, but after I click "generate" on the webpage once, it never changes the background again. Below is the code for the button:
<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>
The random colours are always the same, you need to regenerate them:
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> Whenever btn gets clicked, you need to ensure that a new color gets generated each time. You accomplish this by placing the color generation logic inside the event listener's callback.
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>