JS Color Generator Not Working

Question

I'm trying to make a webpage where JS will generate 2 colors and use them in a gradient. Here is what I have:

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 + ")";

Demo that doesn't work: http://jsfiddle.net/8pzaeo3w/16/

`Uncaught SyntaxError: Unexpected token )` Learn how to debug JavaScript: https://developer.chrome.com/devtools/docs/javascript-debugging — Felix Kling, Jan 25 '15 at 01:03
Also note that you are using different code in your jsFiddle. — Felix Kling, Jan 25 '15 at 01:05
http://stackoverflow.com/questions/15071062/using-javascript-to-edit-css-gradient — sabithpocker, Jan 25 '15 at 01:11

score 1 · Accepted Answer · answered Jan 25 '15 at 01:13

From the MDN documentation:

Gradients are defined as CSS <image> data types; they can be used only where an image data type is required. For this reason, linear-gradient won't work on background-color and other properties requesting <color>.

However, you can assign it to background. The other problem is your top value. The value you generate is:

hsl(286100%,30%

I'm sure you can find out what is wrong with that.

If you fix both things it works. I recommend to learn how to debug JavaScript so that you are able to inspect variables yourself.

JS Color Generator Not Working

HTML

CSS

JS

1 Answers1