I need help with my html work. I'm pretty new to javascript and I had a work asking me to "onclick changes the color of the text in our ordered list to change to a random color."

The paragraph that needs to be changed is id=p1, and so far all I got is

<script>
// Random Colors
function randomColors() {
}    
</script>

and

<div> 
  <button type="button" id="b1" class="button" onclick="randomColors()">Button 1</button>
</div>

I need help with my html work. I'm pretty new to javascript and I had a work asking me to "onclick changes the color of the text in our ordered list to change to a random color."

The paragraph that needs to be changed is id=p1, and so far all I got is

<script>
// Random Colors
function randomColors() {
}    
</script>

and

<div> 
  <button type="button" id="b1" class="button" onclick="randomColors()">Button 1</button>
</div>

• javascript
• html

2 Answers 2

Paul Irish has a few examples of a random color generator for javascript on his website here.

Which, can be implemented fairly simply...

Example

function randomize() {
  document.getElementById('p1').style.color = randomColors();
}


// random colors - taken from here:
// http://www.paulirish./2009/random-hex-color-code-snippets/

function randomColors() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

<div>
  <p id="p1">Hello World</p>
</div>

<button id="b1" onclick="randomize()">Click Me!</button>

HTH

here is a nice one that keeps the same lightness and saturation:

function getRndColor() {
    return 'hsl(' + (360 * Math.random()) + ',50%,50%)'; // H,S,L
}