CODEWITHSUNDEEP
javascriptcss
staynjokede
staynjokede

Reputation: 97

Modify Class Name with random number in JavaScript

My Set Up

I have a pie chart css that I use to display pie charts in percentage,

The class works this way:
<div id="chart" class="c100 p20 small dark center">

The second class "p20" means it should display a chart of 20%, thus if i change it to "p70", is shows a 70% chart.

Now I have also a Java Script code to generate a random number and display it in a div, 

setInterval(function() {
    var random = (Math.floor((Math.random() * 100) + 1));
    document.getElementById("demo").innerHTML = random;
}, 1000);

It works

What I want

But i also want the random number to change the class of the chart div, such as

I've tried this, but it doesn't work, it only updates with the first random number and stops. 

 setInterval(function() {
     var random = (Math.floor((Math.random() * 100) + 1));
     document.getElementById("demo").innerHTML = random;
     //remove the default class and add the new class
     document.getElementById("chart").classList.remove('p20');
     document.getElementById("chart").classList.add('p' + random);
 }, 1000);

Upvotes: 0

Views: 1956

Answers (3)

Philipp Meissner
Philipp Meissner

Reputation: 5482

Declaring a previousRandom variable outeside of current scope (globally, so to speak), will allow you to keep track of the random value generated in the last interval.

var previousRandom;
setInterval(function() {
  var random = (Math.floor((Math.random() * 100) + 1));
  document.getElementById("demo").innerHTML = random;
  //remove the previous (random) class and add the new (random) class
  document.getElementById("chart").classList.remove(previousRandom ? ('p' + previousRandom) : false);
  document.getElementById("chart").classList.add('p' + random);
  previousRandom = random;
}, 1000);

This way we can generate a new random value, add it to the element and in the next interval we will remove the previous random value.

Upvotes: 4

Jared Smith
Jared Smith

Reputation: 21926

Generally speaking, you'll want to keep the last class in a closure:

setInterval((function() {
  var last = 0;
  var element = document.getElementById('chart');
  // this is the function that will actually be run by setInterval
  // and it has access to last and element
  return function () {
    element.classList.remove('p' + last);
    last = Math.random() * 100 | 0; // binary or with 0 truncates to int
    element.innerHTML = last;
    element.classList.add('p' + last);
  };
})(), 1000); // note the invocation here that returns the inner function

Upvotes: 1

Sebastian Speitel
Sebastian Speitel

Reputation: 7336

To remove the previous class you have to know which class was there previously, to get it I stored it in the prevClass attribute.

setInterval(function() {
     var random = (Math.floor((Math.random() * 100) + 1));
     var ele = document.getElementById("chart");
     ele.innerHTML = random;
     //remove the default class and add the new class
     var prev = ele.getAttribute("prevClass");
     ele.classList.remove(prev||"");
     ele.classList.add('p' + random);
     ele.setAttribute("prevClass",'p' + random);
 }, 1000);

Upvotes: 3

Related Questions