Choose an element at random

Question

Choose an element at random

I am trying to figure out how to select all div elements with the same class of "dot" under a parent div in JavaScript. Here is an example structure:

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

My goal is to apply a certain class to a random element with the class "dot" every 5 seconds using JavaScript. Can someone help me with this?

randomElement.addClass('someClass');

javascript html css

Answer 1

Answer №1

To start, you will need to first select all the dots, then during each periodic activation cycle, remove the previously set class and assign it again to a random element within the specified range of 0 to dots count - 1.

Here is a demonstration:

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>

Answer 2

To start, you will need to first select all the dots, then during each periodic activation cycle, remove the previously set class and assign it again to a random element within the specified range of 0 to dots count - 1.

Here is a demonstration:

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>

Answer 3

Answer №2

What do you think of this solution?

function applyStyleToRandomDot() {
    var dotElements = document.getElementsByClassName('dot');
    var totalDots = dotElements.length;
    var randomIndex = Math.floor(Math.random() * totalDots) + 1;
    var randomDot = dotElements[randomIndex];
    randomDot.classList.add('newStyle');
}

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

Answer 4

What do you think of this solution?

function applyStyleToRandomDot() {
    var dotElements = document.getElementsByClassName('dot');
    var totalDots = dotElements.length;
    var randomIndex = Math.floor(Math.random() * totalDots) + 1;
    var randomDot = dotElements[randomIndex];
    randomDot.classList.add('newStyle');
}

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

Answer 5

Answer №3

Here is another unique approach that is straightforward to grasp.

DEMO

var numberOfDots = $(".dot").length;
setInterval(function () {
    $(".dot").removeClass("someClass");
    var x = Math.floor((Math.random() * numberOfDots) + 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>

Answer 6

Here is another unique approach that is straightforward to grasp.

DEMO

var numberOfDots = $(".dot").length;
setInterval(function () {
    $(".dot").removeClass("someClass");
    var x = Math.floor((Math.random() * numberOfDots) + 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>

Answer 7

Answer №4

Outlined below is an iteration across all elements:

Iterate through each element
Assign a class to random elements
Remove those 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>

Answer 8

Outlined below is an iteration across all elements:

Iterate through each element
Assign a class to random elements
Remove those 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>

Answer 9

Answer №5

I believe the solution below should meet your needs:

window.randomNumber = 0;
setInterval(function(){
    if(randomNumber) $(".dot:eq("+ randomNumber +")").toggleClass("randomcss");
    window.randomNumber = Math.floor((Math.random() * $(".dot").length) + 1);
$(".dot:eq("+ randomNumber +")").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/

Answer 10

I believe the solution below should meet your needs:

window.randomNumber = 0;
setInterval(function(){
    if(randomNumber) $(".dot:eq("+ randomNumber +")").toggleClass("randomcss");
    window.randomNumber = Math.floor((Math.random() * $(".dot").length) + 1);
$(".dot:eq("+ randomNumber +")").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/

Answer 11

Answer №6

Here's an alternative approach:

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

function getRandomNumber(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">apple</div>
<div class="dot">orange</div>
<div class="dot">banana</div>
<div class="dot">grape</div>
<div class="dot">mango</div>
<div class="dot">peach</div>

Answer 12

Here's an alternative approach:

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

function getRandomNumber(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">apple</div>
<div class="dot">orange</div>
<div class="dot">banana</div>
<div class="dot">grape</div>
<div class="dot">mango</div>
<div class="dot">peach</div>

Answer 13

Answer №7

When working with jQuery, you may want to attempt the code snippet below:

selectedItems = jQuery("ul li").get().sort(function(){ 
  return Math.round(Math.random())-0.5
}).slice(0,10)

Answer 14

When working with jQuery, you may want to attempt the code snippet below:

selectedItems = jQuery("ul li").get().sort(function(){ 
  return Math.round(Math.random())-0.5
}).slice(0,10)

Choose an element at random

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Important notice: It is not possible to assign refs to function components. Any attempt to do so will result in failure. If you intended to assign a ref, consider

Copy and paste content from Outlook, Word, or any Office software directly into the embedded browser

What is the best way to eliminate duplicate values from an Array in ReactJS?

Tips for avoiding background-image zoom on mobile browsers when stacking elements vertically:

Is it important that the end date does not exceed the start date?

What is the best way to switch between light and dark themes with the ability to locally store the current theme?

Master the Art of Crafting Unique URLs

The functionality of display flex is not functioning as expected outside of the CodePen

The element fails to receive the class when it is being clicked

Basic application - angular has not been declared

Prevent ui-select from being highlighted when clicked

The process of rendering a form eliminates the classes that were previously added by J

Using Nextjs Image as the Background for Layout

Location of Ajax callback function

Adjust CSS classes as user scrolls using skrollr

Tips for dynamically displaying a Material UI dialog with smooth fade effects

Checking connectivity in an Ionic application

Using Python's Beautiful Soup library to retrieve text from h1 and id tags

What is the best method for checking for JavaScript errors when using Selenium WebDriver in conjunction with NodeJS?

How to access and retrieve selected checkbox values using jQuery