点击按钮仅能修改一次页面背景色，如何实现每次点击自动切换颜色

问题原因 #

• random_color变量在页面加载时就完成了随机色值的生成，全局仅计算一次，后续每次点击调用颜色设置函数时，使用的都是同一个固定色值，因此只有第一次点击能看到颜色变化，后续点击无效果。

修复方法 #

将随机色值的生成逻辑移到点击触发的color函数内部，保证每次点击都会生成新的随机色值，修改后的JS代码如下：

let click = document.querySelector('.click');

click.addEventListener('click', () => {
  color();
})

function color() {
  let random_color = "#" + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = random_color;
}

你也可以直接使用完整可运行的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>切换背景色</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 90vh;
    }
  </style>
</head>
<body>
  <button class="click">click</button>
  <script>
    let click = document.querySelector('.click');

    click.addEventListener('click', () => {
      color();
    })

    function color() {
      let random_color = "#" + Math.floor(Math.random() * 16777215).toString(16);
      document.body.style.backgroundColor = random_color;
    }
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者FishKing