Change background to random colors on click - JavascriptjQuery - Stack Overflow

admin管理员组

文章数量:1025498

I'm trying to change my body's background color to a random color every time a nav-bar link is clicked.

I got it so that a random color gets changed the first time a link is clicked - but when a different link is clicked, nothing changes.

Any tips?

HTML:

    <div class="nav">
      <ul id="show">
        <li id="link1"><a href="#portfolio">Portfolio</li></a>
        <li id="link2"><a href="#about">About</li></a>
        <li id="link3"><a href="#email">Contact</li></a>
        <hr/>
      </ul>
    </div>

JS:

$(function() {

     var colors = ['red', 'blue', 'green', 'grey'];

     var randColor = colors[Math.floor(Math.random()*colors.length)];

     $('.nav a').click(function() {
         $('body').css('background-color', randColor);
     });
});

I'm trying to change my body's background color to a random color every time a nav-bar link is clicked.

I got it so that a random color gets changed the first time a link is clicked - but when a different link is clicked, nothing changes.

Any tips?

HTML:

    <div class="nav">
      <ul id="show">
        <li id="link1"><a href="#portfolio">Portfolio</li></a>
        <li id="link2"><a href="#about">About</li></a>
        <li id="link3"><a href="#email">Contact</li></a>
        <hr/>
      </ul>
    </div>

JS:

$(function() {

     var colors = ['red', 'blue', 'green', 'grey'];

     var randColor = colors[Math.floor(Math.random()*colors.length)];

     $('.nav a').click(function() {
         $('body').css('background-color', randColor);
     });
});

• javascript
• jquery
• css

Share Improve this question Follow asked Sep 30, 2015 at 0:56 codinginnewyorkcodinginnewyork 1,13833 gold badges1212 silver badges1717 bronze badges 2

• 2 Your HTML structure is invalid. It’s supposed to be <li><a>…</a></li> and not <li><a>…</li></a>. And remove the <hr/> inside the <ul>. <ul>s and <ol>s can only have <li>s as child elements. – Sebastian Simon Commented Sep 30, 2015 at 1:00
• Based on your function I made this codepen.io/eirenaios/pen/EmYBBP – Suresh Karia Commented Apr 12, 2017 at 7:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Because you only generate one random number and keep using it, move it inside of the click method.

In each click you need to find a new random color, in your case the randColor variable is updated only once on the dom ready, in the click handle the same value is used all the time.

$(function() {

  var colors = ['red', 'blue', 'green', 'grey'],
    color;

  $('.nav a').click(function() {
    var randColor;
    do {
      randColor = colors[Math.floor(Math.random() * colors.length)];
    } while (color == randColor);
    $('body').css('background-color', randColor);
    color = randColor;
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
  <ul id="show">
    <li id="link1"><a href="#portfolio">Portfolio</a></li>
    <li id="link2"><a href="#about">About</a></li>
    <li id="link3"><a href="#email">Contact</a></li>
  </ul>
  <hr/>
</div>

I'm trying to change my body's background color to a random color every time a nav-bar link is clicked.

I got it so that a random color gets changed the first time a link is clicked - but when a different link is clicked, nothing changes.

Any tips?

HTML:

    <div class="nav">
      <ul id="show">
        <li id="link1"><a href="#portfolio">Portfolio</li></a>
        <li id="link2"><a href="#about">About</li></a>
        <li id="link3"><a href="#email">Contact</li></a>
        <hr/>
      </ul>
    </div>

JS:

$(function() {

     var colors = ['red', 'blue', 'green', 'grey'];

     var randColor = colors[Math.floor(Math.random()*colors.length)];

     $('.nav a').click(function() {
         $('body').css('background-color', randColor);
     });
});

I'm trying to change my body's background color to a random color every time a nav-bar link is clicked.

I got it so that a random color gets changed the first time a link is clicked - but when a different link is clicked, nothing changes.

Any tips?

HTML:

    <div class="nav">
      <ul id="show">
        <li id="link1"><a href="#portfolio">Portfolio</li></a>
        <li id="link2"><a href="#about">About</li></a>
        <li id="link3"><a href="#email">Contact</li></a>
        <hr/>
      </ul>
    </div>

JS:

$(function() {

     var colors = ['red', 'blue', 'green', 'grey'];

     var randColor = colors[Math.floor(Math.random()*colors.length)];

     $('.nav a').click(function() {
         $('body').css('background-color', randColor);
     });
});

• javascript
• jquery
• css

Share Improve this question Follow asked Sep 30, 2015 at 0:56 codinginnewyorkcodinginnewyork 1,13833 gold badges1212 silver badges1717 bronze badges 2

• 2 Your HTML structure is invalid. It’s supposed to be <li><a>…</a></li> and not <li><a>…</li></a>. And remove the <hr/> inside the <ul>. <ul>s and <ol>s can only have <li>s as child elements. – Sebastian Simon Commented Sep 30, 2015 at 1:00
• Based on your function I made this codepen.io/eirenaios/pen/EmYBBP – Suresh Karia Commented Apr 12, 2017 at 7:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Because you only generate one random number and keep using it, move it inside of the click method.

In each click you need to find a new random color, in your case the randColor variable is updated only once on the dom ready, in the click handle the same value is used all the time.

$(function() {

  var colors = ['red', 'blue', 'green', 'grey'],
    color;

  $('.nav a').click(function() {
    var randColor;
    do {
      randColor = colors[Math.floor(Math.random() * colors.length)];
    } while (color == randColor);
    $('body').css('background-color', randColor);
    color = randColor;
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
  <ul id="show">
    <li id="link1"><a href="#portfolio">Portfolio</a></li>
    <li id="link2"><a href="#about">About</a></li>
    <li id="link3"><a href="#email">Contact</a></li>
  </ul>
  <hr/>
</div>

本文标签： Change background to random colors on clickJavascriptjQueryStack Overflow