change class name to a new random class name

webpack minify css class names
obfuscate css class names
webpack changing class names
webpack obfuscate css
css modules
react random classname
javascript change class name
react obfuscate css

I'm new to Javascript and programming in general.

I have 20 div elements, which share the same class name. I am applying randomly a new class to this 20 divs from a list array of 40 class name.

How can I apply UNIQUE class name to my divs?

The HTML:

<div class="container">
    <div class="container__grid">
      <div id="square1" class="box0"></div>
      <div id="square2" class="box0"></div>
      <div id="square3" class="box0"></div>
      <div id="square4" class="box0"></div>
      <div id="square5" class="box0"></div>
      <div id="square6" class="box0"></div>
      <div id="square7" class="box0"></div>
      <div id="square8" class="box0"></div>
      <div id="square9" class="box0"></div>
      <div id="square10" class="box0"></div>
      <div id="square11" class="box0"></div>
      <div id="square12" class="box0"></div>
      <div id="square13" class="box0"></div>
      <div id="square14" class="box0"></div>
      <div id="square15" class="box0"></div>
      <div id="square16" class="box0"></div>
      <div id="square17" class="box0"></div>
      <div id="square18" class="box0"></div>
      <div id="square19" class="box0"></div>
      <div id="square20"class="box0"></div>
    </div>
  </div>
</div>

So far, I set up an array with my class name:

var arrayClass = ["box1","box2","box3","box4","box5",
                  "box6","box7","box8","box9","box10",
                  "box11","box12","box13","box14","box15",
                  "box16","box17","box18","box19","box20",
                  "box21","box22","box23","box24","box25",
                  "box26","box27","box28","box29","box30",
                  "box31","box32","box33","box34","box35",
                  "box36","box37","box38","box39","box40"];

Then I manage to have a list of 20 random arrayClass:

var randomClassList = [];
for (var index = 0; index < 20; index++) {
  randomClassList.push(arrayClass[Math.floor(Math.random() * arrayClass.length)]);

and push it into my HTML:

square1.className = randomClassList[0]
square2.className = randomClassList[1]
square3.className = randomClassList[2]
square4.className = randomClassList[3]
square5.className = randomClassList[4]
square6.className = randomClassList[5]
square7.className = randomClassList[6]
square8.className = randomClassList[7]
square9.className = randomClassList[8]
square10.className = randomClassList[9]
square11.className = randomClassList[10]
square12.className = randomClassList[11]
square13.className = randomClassList[12]
square14.className = randomClassList[13]
square15.className = randomClassList[14]
square16.className = randomClassList[15]
square17.className = randomClassList[16]
square18.className = randomClassList[17]
square19.className = randomClassList[18]
square20.className = randomClassList[19]

Just remove the element from the array once it's picked:

const randomClassList = [];
for (var index = 0; index < 20; index++) {
  const randomIndex = Math.floor(Math.random() * arrayClass.length);
  randomClassList.push(arrayClass[randomIndex]);
  arrayClass.splice(randomIndex, 1);
}

Or, even better, without a for loop:

const randomClassList = Array.from({ length: 20}, () => {
  const randomIndex = Math.floor(Math.random() * arrayClass.length);
  randomClassList.push(arrayClass[randomIndex]);
  arrayClass.splice(randomIndex, 1);
});

Reducing CSS bundle size 70% by cutting the class names and , The first thing you will notice is that the CSS class names are no more can change the class names to whatever we like, even a random hash. The class name is used as a selector in HTML which helps to give some value to the element attributes. The document.getElementById() method is used to return the element in the document with the “id” attribute and the “className” attribute can be used to change/append the class of the element.

const classes = [...Array(40)].map((_, i) => `box${i + 1}`) // generate a new array of length 40 whose elements are `box(index+1)`
const squares = document.querySelectorAll('.box0') // pick all the elements which have the default 'box0' class


squares.forEach(square => { // iterate over the squares array
    const randomClassIndex = Math.floor(Math.random() * classes.length) // pick a random index in the classes array
    square.classList.replace('box0', classes[randomClassIndex]) // add the chosen random class to the square's classList

    classes.splice(randomClassIndex, 1) // remove the chosen class from the array
})

className, LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc() Set the class for a <div> element with id="myDIV": Get the class names of an element with multiple classes: To add a class to an element, without overwriting existing values, insert a space and the new class name:. Find the name element, create a new name element, replace. Be sure to do the same for any constructors on the class, and any references to the class. Alternatively, you could fire a "rename" refactoring by constructing a RenameRefactoringHandler. That's probably your safest bet.

var randomClassList = [];

while(randomClassList.length < 20){
    var randomnumber = Math.floor(Math.random()*40) + 1;
    if(randomClassList.indexOf(randomnumber) > -1) continue;
    // randomClassList[randomClassList.length] = 'box' + randomnumber;
    randomClassList.push('box' + randomnumber);
}

What Makes For a Semantic Class Name?, Whereas the class name “movie-review” is totally fine and you just change the properties/values to do the green background instead. This isn't to say the first  Getting Started with Open Broadcaster Software OBS - Duration: 13:32. The Church Media Guys [Church Training Academy] Recommended for you

JavaScript className Explained: Learn to JavaScript Change Class, This property is used to set or return the name of a class of an HTML In case you want to add a new class to an element and keep the old one  Example. Toggle between class names on different scroll positions - When the user scrolls down 50 pixels from the top, the class name "test" will be added to an element (and removed when scrolled up again).

Configurable class name pattern · Issue #190 · cssinjs/jss · GitHub, So I cannot have random hash part in class names (component styles isolation still Your use case just doesn't justify a public api change. Free and easy to use. Used by teachers and for raffles. Enter names, spin wheel to pick a random winner. Customize look and feel, save and share wheels.

CSS Modules – random vs deterministic class names in production , I understand the benefits of deterministic/predictable class names which don't change with each build (so that elements can be targeted by class  You can also use the Random class for such tasks as generating random T:System.Boolean values, generating random floating point values with a range other than 0 to 1, generating random 64-bit integers, and randomly retrieving a unique element from an array or collection.

Comments
  • Just remove the class name from arrayClass after adding it to randomClassList
  • Interested as to why you've chosen to use arr[index] = 'value' instead of arr.push('value')?
  • You're correct, push() should be better randomClassList.push('box' + randomnumber);