Select random element

Question

I have multiple div elements with same class dot under parent div like this

<div id="dots">
   <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
   ...
   <div class="dot"> . </div>
</div>

How can I using JavaScript select all elements with class="dot" and on every 5 seconds apply certain class on random element.

randomElement.addClass('someClass');

Clarify: and remove class from previous dot or just add to new with preserving previous? — dfsq, Sep 09 '15 at 06:17
I bet no one has ever tried selecting a random element before. Very good question. A+ unique. — Mulan, Sep 09 '15 at 06:19

score 6 · Accepted Answer · edited May 23 '17 at 11:59

What you need to do is basically first select all dots, then on each periodic activation run remove previously set class and set it again to random element with index within range from 0 to dots count - 1.

Here is an example.

var $dots = $('#dots .dot');

function activate() {
    $dots.removeClass('active')
         .eq([Math.floor(Math.random()*$dots.length)])
         .addClass('active');
 setTimeout(activate, 1000);
}

activate();

#dots .dot {
    display: inline-block;
    height: 50px;
    width: 50px;
    background: coral;
    border-radius: 50%;
    opacity: 0.2;
    transition: opacity .3s ease;
}
#dots .dot.active {opacity: 1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dots">
   <div class="dot"></div>
   <div class="dot"></div>
   <div class="dot"></div>
   <div class="dot"></div>
   <div class="dot"></div>
</div>

score 3 · Answer 2 · answered Sep 09 '15 at 06:20

3

How about this?

function addClassToRandomDotElement(){
    var dotElements = document.getElementsByClassName('dot');
    var totalDotElements = dotElements.length;
    var randomNumber = Math.floor(Math.random() * totalDotElements ) + 1;
    var randomDotElement = dotElements[randomNumber];
    randomDotElement.addClass('someClass');
}

setInterval(function(){
    addClassToRandomDotElement();
},5000);

answered Sep 09 '15 at 06:20

AdityaParab

7,024
3
27
40

1

Should be `Math.floor(Math.random() * totalDotElements);` or the first element will never be selected, and there's a chance of going out of bounds. – Broxzier May 04 '16 at 14:06

score 1 · Answer 3 · answered Sep 09 '15 at 06:35

Still one more different way, easy to understand.

DEMO

var noofdot = $(".dot").length;
setInterval(function () {
    $(".dot").removeClass("someClass");
    var x = Math.floor((Math.random() * noofdot) + 1);
    $(".dot:nth-child(" + x + ")").addClass("someClass");
}, 5000);

.someClass
{
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dots">
    <div class="dot">.</div>
    <div class="dot">.</div>
    <div class="dot">.</div>...
    <div class="dot">.</div>
</div>

score 1 · Answer 4 · answered Sep 09 '15 at 06:39

Here is an iteration over all elements:

iteration over all elements
Add class to random elements
Remove that elements from the iteration list.

var elements = document.getElementsByClassName("dot");


setInterval(function() {
  var random = Math.floor(Math.random() * elements.length);
  elements[random].className += " extra";
  delete elements[random];
}, 1000);
//change 1000 to 5000. This is the interval speed in milisec.

.extra {
  font-size: 200%;
  background-color: cornflowerblue;
  width: 50px;
}

<div class="container">
  <div class="dot">Test</div>
  <div class="dot">Test</div>
  <div class="dot">Test</div>
  <div class="dot">Test</div>
</div>

Luthando Ntsekwa · Answer 5 · 2015-09-09T06:47:57.167

Here is another simple way:

function changeColor(){
  var randInt = getRandomInt(0, $(".dot:not(.newStyle)").length -1);
  $($(".dot:not(.newStyle)")[randInt]).addClass('newStyle');
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


setInterval(function(){
    changeColor();
},3000);

.newStyle{background-color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot">testing</div>
<div class="dot">test</div>
<div class="dot">cool</div>
<div class="dot">more</div>
<div class="dot">cat</div>
<div class="dot">lol</div>

Kishore Sahasranaman · Answer 6 · 2015-09-09T06:47:54.670

I think the below should work for you.

window.radomNo = 0;
setInterval(function(){
    if(radomNo) $(".dot:eq("+ radomNo +")").toggleClass("randomcss");
    window.radomNo = Math.floor((Math.random() * $(".dot").length) + 1);
 $(".dot:eq("+ radomNo +")").toggleClass("randomcss");
},1000);

.randomcss {
    background : yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dots">
   <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
     <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
     <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
     <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
</div>

http://jsfiddle.net/kishoresahas/7qgvru5p/

score -1 · Answer 7 · answered Sep 09 '15 at 06:23

-1

if you use jquery you can try the following:

randomElements = jQuery("div").get().sort(function(){ 
  return Math.round(Math.random())-0.5
}).slice(0,5)

answered Sep 09 '15 at 06:23

Dario

280
2
9

downvoted since you do not set an interval, or add a class to the randomelements – Persijn Sep 09 '15 at 06:42

Select random element

7 Answers7