Insert a random number in to an inline style for a background color

Question

I'm trying to output a random number between 0-360 in to and inline style tag using javascript or jquery but I can't seem to figure out how. Any help would be greatly appreciated.

Fiddle attached here - https://jsfiddle.net/4c59f6aw/

<div style="background-color:hsl('value to go here', 100%, 50%)"></div>

Answer 1

One simple way to do is, is to add the CSS via JavaScript.

The first line takes a number that is random (up to 360) and the second and third line get the #box div and add the color dynamically. So every page refresh, a different color will be added to the box.

The background-color notation might look strange. It's called template strings and you can read more about it at MDN .

I don't know why you tagged jQuery to your question, as it is a library and needs to be downloaded by the client. It's not needed to achieve the result that you want to.

 var randomNumber = Math.floor(Math.random() * 360); var myElement = document.querySelector("#box"); myElement.style.backgroundColor = `hsl(${randomNumber}, 100%, 50%)`; 

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

 <div id="box"></div> 

Answer 2

 var elements = document.querySelectorAll('.hello'); for(var i=0; i < elements.length; i++) { var color = Math.floor((Math.random() * 361) + 0); elements[i].style.background = 'hsl('+color+', 100%, 50%)'; } 

 div { height: 200px; width: 200px; margin: 10px; background-color:orange; } 

 <div class="hello"></div> <div class="hello"></div> <div class="hello"></div> <div class="hello"></div> <div class="hello"></div> 

Answer 3

Check this code snipet

Using Jquery

 $(function(){ $('button').click(function(){ $('#change').css({'background-color': 'hsl('+randomIntFromInterval(0,255)+', 100%, 50%)'}); }); function randomIntFromInterval(min,max) { return Math.floor(Math.random()*(max-min+1)+min); } }) 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="change" style="background-color:hsl(126, 100%, 50%)"></div> <button>Change</button> 

Using Javascript

 function change(){ var div = document.getElementById('change'); div.style.backgroundColor = 'hsl('+randomIntFromInterval(0,255)+', 100%, 50%)'; } function randomIntFromInterval(min,max) { return Math.floor(Math.random()*(max-min+1)+min); } 

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

 <div id="change" style="background-color:hsl(123, 100%, 50%)"></div> <button onclick="change()">Change</button> 

Answer 4

Pure Javascript solution here

function populate(number, multiplier) {
  for (var i = 0; i < number; i++) {
    var div = document.createElement('div');
    div.setAttribute('style', 'background-color:hsl(' + i * multiplier +',100%,50%)');
    document.body.appendChild(div);
  }
}
populate(4, 30);