javascript - 具有纯JavaScript的随机背景颜色生成器(无jquery)

var color;

function randomColor() {
  color =  '#' + Math.random().toString(16).slice(2, 8);  // Random number converted to hexadecimal         with toString(16) and then slice to make it a 6 digit number. like fe2e4d or f4e22e
};

var change = document.getElementById('color_change');
change.addEventListener('click', function() {
  document.getElementById('random_background').style.backgroundColor  = "color" ;
});

div{
  width:300px;
  height:300px;
}

<div id="random_background"></div>
<button id="color_change" >Color Change</button>

我认为最后一部分是问题所在，但我找不到任何地方如何正确实施它。请帮忙。

最佳答案

如@Teemu在评论中所述，您正在为backgroundColor属性设置字符串，而不是设置color变量的实际值。

这里有一个示例，可以在不使用var color;的情况下为您提供帮助
使您的randomColor()函数直接返回该值。然后在backgroundColor属性中调用该函数，如下所示：

function randomColor() {
  return '#' + Math.random().toString(16).slice(2, 8);
};

var change = document.getElementById('color_change');
change.addEventListener('click', function() {
  document.getElementById('random_background').style.backgroundColor = randomColor();
});

div{
  width: 300px;
  height: 150px;
}

<div id="random_background"></div>
<button id="color_change" >Color Change</button>

如果要使用var color，请在设置randomColor()属性之前调用backgroundColor，然后将其设置为变量，而不是字符串：

...
randomColor();
document.getElementById('random_background').style.backgroundColor = color;

关于javascript - 具有纯JavaScript的随机背景颜色生成器(无jquery)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51563512/