CODEWITHSUNDEEP
javascriptjquery
user6638423
user6638423

Reputation:

Simple way to avoid previous number in Math.random?

I am working on a random quote/color generator. I want it to avoid repeating previous color (in a simple/easy/understandable way as I'm a complete beginner in JS/jQuery).

Here is my code, I don't know what is wrong with it.

  var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589","#906161","#875d39","#ffdab9","#d1e529","#3a718b"];

  var color = Math.floor(Math.random() * colors.length);

  var lastcolor = 0;

  while(color === lastcolor){
    color = Math.floor(Math.random() * colors.length) + 1;
  }

  $("body").animate({backgroundColor: colors[color]}, 1000);
  $("#new-quote").animate({backgroundColor: colors[color]}, 1000);
  $("h6").fadeOut(1000);
  $("p").fadeOut(1000);

   });
  });

Basically, when I click a button (#new-quote), the current background color changes to another random color and so on. But now and then the color doesn't change as the machine chose the same number/color as the current one. I'm trying to avoid that!

Upvotes: 0

Views: 155

Answers (3)

realpac
realpac

Reputation: 572

Simpler method: Use splice() method to remove the current element from your colors array so that every time you run the code, the previously occurring element wont occur again. 

var color = Math.floor(Math.random() * colors.length);

//from index = color, delete that element using splice(index, # of elements to delete)
colors.splice(color, 1);
//now colors array will not contain the colors[color] element

for (var i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

Upvotes: 0

nicael
nicael

Reputation: 18997

I guess there's some sort of loop around the code you provided. Then you shouldn't reset the color, but to assign it to the previous one.

var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589","#906161","#875d39","#ffdab9","#d1e529","#3a718b"];

var color = Math.floor(Math.random() * colors.length);

while(color === lastcolor){
  color = Math.floor(Math.random() * colors.length) + 1;
}

lastcolor = color;

And of course you should define your lastcolor at the beginning of the script. Place

var lastcolor = 0;

after <script> tag opens.

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386560

You could use simply a new random value, because if you add one, you might get undefined if the random value is the index of the last element.

while (color === lastcolor){
    color = Math.floor(Math.random() * colors.length); // + 1;
    //                                         without ^^^^^^^ 
}

A better style would be one assignment with a do ... while loop.

var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589", "#906161", "#875d39", "#ffdab9", "#d1e529", "#3a718b"],
    color,
    lastcolor = 0;

do {
    color = Math.floor(Math.random() * colors.length);
} while(color === lastcolor);

lastcolor = color;

Upvotes: 0

Related Questions