JS颜色生成器不工作

Question

我试图创建一个网页，JS将生成2种颜色并在渐变中使用它们。这就是我所拥有的：

HTML

<div id="hi"></div>

CSS

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

JS

var hue = Math.floor(Math.random() * 360);
var top = "hsl(" + hue + ",100%,30%";
var bottom = "hsl(" + hue + ",100%,50%)";
document.getElementById('hi').style.background = "linear-gradient(" + top + "," + bottom + ")";

不起作用的演示：http://jsfiddle.net/8pzaeo3w/16/

Answer 1

来自MDN documentation：

  

渐变定义为CSS <image>数据类型;它们只能在需要图像数据类型的地方使用。因此，线性渐变不会对background-color以及请求<color>的其他属性起作用。

但是，您可以将其指定给background。另一个问题是您的top值。您生成的值是：

hsl(286100%,30%

我相信你可以找出它的错误。

如果你修复了两件事，它就有效。我建议learn how to debug JavaScript，以便您自己检查变量。