Trying to add a button that changes the background color my nav bar each time the button it is pressed

Question

Hello I am starting off in Javascript / CSS. I am currently practicing.

I am trying to add a button on my page that changes the color of my navbar whenever it is clicked. Is there a way to get a randomly generated color? Or do I have to list the colors in the code?

This is my current test page.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: blueviolet;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white; /*changes text of the nav bar */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

</style>
</head>
<body>



<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>

</ul>



<script>
function myFunction() {
    document.body.style.backgroundColor = "red";
}
</script>

</body>
</html>

Thank you.

Helper function for generating random color hex values http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript — Eric Guan, Mar 11 '16 at 01:24
Thank you! I'm not exactly sure how to incorporate that into my navigation bar. For example, the document.body.style.backgroundColor = "red"; changes the background of the page. Is there one for the navigation bar? — Rorix, Mar 11 '16 at 01:29
@Rorix if you take a look my solution it will change the color to a random value every time you click on the navbar. — Larry Lane, Mar 11 '16 at 01:54

score 4 · Answer 1 · answered Mar 11 '16 at 01:55

Here's my take on it using a random HSL color value. Using HSL allows you to have a random color but still be able to control the hue intensity and lightness of the colors separately.

// make button do something on click 
var btn = document.getElementById( 'navcol-btn' ); 
btn.addEventListener( 'click', function()
{
    // target navbar ul by ID 
    var nav  = document.getElementById( 'navbar' ), 
        rand = Math.random() * 360; 

    // change bg-color 
    nav.style['background-color'] = 'hsl('+rand+', 50%, 50%)'; 
});

Here's an example on JSFiddle

This is a nice alternative solution to normal rgb and hex values. — Larry Lane, Mar 11 '16 at 01:56

L777 · Accepted Answer · 2016-03-11T01:35:04.370

2

In my version it gets 3 random numbers (from 0 to 255) to set the RGB values.

function changecolor() {
var x = Math.floor((Math.random() * 255) + 0);
var y = Math.floor((Math.random() * 255) + 0);
var z = Math.floor((Math.random() * 255) + 0);
  
document.getElementsByTagName("ul")[0].style.backgroundColor = "rgb("+x+","+y+","+z+")"; 
}

ul {
background: lavender;  
}

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<button onclick="changecolor()">click</button>

edited Mar 11 '16 at 01:35

answered Mar 11 '16 at 01:29

L777

7,719
3
38
63

if you prefer, you can set an `Id` for the `ul` (example `
– L777 Mar 11 '16 at 01:43

score 1 · Answer 3 · answered Mar 11 '16 at 01:43

1

$('#button_id').on('click', function(){
    document.body.style.backgroundColor = '#'+
        Math.floor(Math.random()*16777215).toString(16);
});

answered Mar 11 '16 at 01:43

Shelvin

136
8

score 0 · Answer 4 · edited May 23 '17 at 12:31

Try this

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

$('#button_name').on('click', function(){

   var color = getRandomColor();
   document.body.style.backgroundColor = color;

});

check that Random color generator in JavaScript

Larry Lane · Answer 5 · 2016-03-11T02:19:20.573

You can do something like the following Live Demo,

HTML:

<ul id="nav-bar">
  <li><a href="index.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

JavaScript:

  //on click handler for the nav-bar
  document.getElementById("nav-bar").addEventListener("click",function(){


  //Call the changeColor function passing
  //the object clicked on as a parameter.
  changeColor(this);

});


function changeColor(element) {


  var red,green,blue;

  red = randomColor();
  green = randomColor();
  blue = randomColor();



    element.style.backgroundColor = "rgb(" + red +
"," + green + "," + blue + ")";
}

function randomColor(){

  //store a random number between 0 and 255
  var randomColor = Math.floor(Math.random()*256);

  return randomColor;


}

Trying to add a button that changes the background color my nav bar each time the button it is pressed

5 Answers5