javascript - 使用纯 javascript 的随机背景颜色生成器(无 jquery)

Question

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>

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

Answer 1

正如 @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，请在设置backgroundColor属性之前调用randomColor()，然后将其设置为变量，而不是字符串:

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