按钮在网站上只能工作一次，需要它无限次工作答案

【问题标题】：Button only works once on a website, need it to work infinitely many times按钮在网站上只能工作一次，需要它无限次工作
【发布时间】：2021-12-30 22:35:28
【问题描述】：

我是编码初学者（如果这个问题有一个容易解决的解决方案，请原谅我），但我正在尝试创建一个颜色翻转器，每次将网页的背景更改为随机颜色时“生成”按钮被点击。我不知道如何配置按钮，所以我查看了有关如何配置的教程。教程和我的版本的代码是一样的，但是我在网页上点击一次“生成”后，它就再也没有改变背景了。下面是按钮的代码：

<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>

【问题讨论】：

标签： javascript html css button

【解决方案1】：

随机颜色总是一样的，你需要重新生成它们：

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>

【讨论】：

【解决方案2】：

每当点击btn 时，您需要确保每次都生成一种新颜色。您可以通过将颜色生成逻辑放在事件侦听器的回调中来完成此操作。

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>

【讨论】：