CODEWITHSUNDEEP
javascripthtmlcss
user4509200
user4509200

Reputation:

Random hue for text color not working

I am trying to have a function that runs infinitely. It gets a random hue, and then inserts it into the color property. Here is my code:

<script>    
  function colorMe(){
    var hue = Math.floor((Math.random() * 359) + 1);
    document.getElementById("hie").style.color = hsl(hue, 75%, 50%);
    colorMe();
  }
  colorMe();
</script>
<p id="hie">I don't know what color this will be!</p>

Thanks in advance.

Upvotes: 0

Views: 333

Answers (3)

adrianmcli
adrianmcli

Reputation: 1996

I'm not sure, but personally I would use filter: hue-rotate(30deg) instead.

I'm not sure about IE support, but it's supported in FF and Chrome (via vendor prefix). Example:

-webkit-filter: hue-rotate(30deg);
filter: hue-rotate(30deg);

Just vary the degrees of rotation randomly and set it accordingly.

Edit:

Using jQuery:

$('#hie').css("-webkit-filter","hue-rotate(" + hue + "deg)")
$('#hie').css("filter","hue-rotate(" + hue + "deg)")

Upvotes: 0

matt
matt

Reputation: 9412

A couple of things - first, you're calling colorMe from within the colorMe function. You probably don't want to do that. Second is that hsl doesn't exist as a javascript method - it's a css function. Try setting the color equal to a string which contains your updated hsl color, as seen here: http://jsfiddle.net/99h5s0L6/

function colorMe() {
    var hue = Math.floor((Math.random() * 359) + 1);
    document.getElementById("hie").style.color = "hsl(" + hue + ", 75%, 50%)";
}
colorMe();

Upvotes: 1

Torben H.
Torben H.

Reputation: 160

You have to put the hsl part in quotes.

document.getElementById("hie").style.color = "hsl("+hue+", 75%, 50%)";

Upvotes: 2

Related Questions