时间戳

首页 > 解决方案 > 每次单击按钮时如何更改颜色？

javascript - 每次单击按钮时如何更改颜色？

问题描述

当我单击按钮时，我希望每次单击时都会更改主体颜色

但它只改变了一次。如果我再次单击，颜色不会改变。

我不知道我的代码有什么错误？

let click = document.querySelector('.click');
let random_color = "#" + Math.floor(Math.random() * 16777215).toString(16);


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

function color() {
  document.body.style.backgroundColor = random_color;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
}
<button class="click">click</button>

标签： javascript

解决方案

只需将函数外部的随机颜色变量形式移动到color()函数内部即可color()。

这是片段：

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;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
}
<button class="click">click</button>

推荐阅读