JavaScript loop random pick from array

Question

I am having a problem with this. I want to pick random word from an array everytime the popup loads. But the word doesn't change. I always get results as:

(march, march, march.. january, january, january, january, january)...

It just pick the random month and then uses it every loop. I want to make it random every loop. Can someone please help me?

var i;

for (i = 0; i < 5; i++) {
  $("#notification").fadeIn("slow").delay(1000).fadeOut("slow");

  var myArray = ['January', 'February', 'March'];
  var rand = myArray[Math.floor(Math.random() * myArray.length)];

  document.getElementById("notification").innerHTML = rand;
}

//$("#notification").append(rand);

#notification {
  position: fixed;
  bottom: 5px;
  left: 5px;
  width: 170px;
  /* set to 100% if space is available */
  height: 70px;
  z-index: 105;
  text-align: center;
  font-weight: normal;
  font-size: 12px;
  color: white;
  background-color: #FF7800;
  box-shadow: 0 0 10px #222;
  padding: 5px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* For IE8 and earlier */
}

#notification span.dismiss {
  border: 2px solid #FFF;
  padding: 0 5px;
  cursor: pointer;
  float: right;
  margin-right: 10px;
}

#notification a {
  color: white;
  text-decoration: none;
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification" style="display: none;">
  <span class="dismiss"><a title="dismiss this notification">X</a></span>
</div>

JSfiddle link

You should not perform asynchronous operations (showing/hiding the element with animations) in a synchronous loop. That will result in unwanted behaviour. — 31piy
– 31piy, Commented Jul 16, 2018 at 11:37

trincot · Accepted Answer · 2018-07-16 11:44:13Z

Your for loop completes immediately before the animation starts, so you're seeing the last generated random value only.

Instead, you need to wait each time for the animation to complete before making the next iteration. This you can do with a callback argument to fadeOut:

var myArray = ['January', 'February', 'March']; 
(function loop(i) { 
   if (i >= 5) return; // all iterations have been completed
   var rand = myArray[Math.floor(Math.random() * myArray.length)];
   document.getElementById("notification").textContent = rand;
   // Use callback argument of fadeOut to chain to next iteration
   //    when the animation is complete
   $("#notification").fadeIn("slow").delay(1000).fadeOut("slow", loop.bind(null, i+1));
})(0); // Execute the loop function immediately with i = 0

#notification {
    position: fixed;
    bottom: 5px;
    left: 5px;
    width:170px; /* set to 100% if space is available */
    height: 70px;
    z-index:105;
    text-align:center;
    font-weight:normal;
    font-size:12px;
    color:white;
    background-color:#FF7800;
    box-shadow:0 0 10px #222;
    padding:5px;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification" style="display: none;">
  <span class="dismiss"><a title="dismiss this notification">X</a></span>
</div>

user3003238 · Accepted Answer · 2018-07-16 11:48:48Z

0

You add a delay for animation via for loops.

However, all random value calculated at the first tick.

var i;
var myArray = ['January', 'February', 'March','April','May']; 
for (i = 0; i < 5; i++) { 
$("#notification").fadeIn("slow").delay(1000).fadeOut("slow");

setTimeout(function(){
var rand = myArray[Math.floor(Math.random() * myArray.length)];
  document.getElementById("notification").innerHTML = rand;
  // slow refer to 600ms, 600*2+1000 = 2200
  },2200*i);
}

http://jsfiddle.net/vmsb14dL/81/

answered Jul 16, 2018 at 11:48

user3003238

1,51510 silver badges17 bronze badges

Collectives™ on Stack Overflow

JavaScript loop random pick from array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related