Button only works once on a website, need it to work infinitely many times-CodePudding

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 >
            <h1>color flipper</h1>
            <h2>press the button to generate a random color.</h2>
            <h3> color: <span >#000000</span></h3>
            <button  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>

CodePudding user response：

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 >
            <h1>color flipper</h1>
            <h2>press the button to generate a random color.</h2>
            <h3> color: <span >#000000</span></h3>
            <button  id="btn">generate</button>
        </div>   
</main>

CodePudding user response：

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 >
      <h1>color flipper</h1>
      <h2>press the button to generate a random color.</h2>
      <h3> color: <span >#000000</span></h3>
      <button  id="btn">generate</button>
  </div>   
</main>