Making Multiple Js Randomizers

[TheSlicingEdge]

So basically I have a Js randomizer that randomizes a designated html string. Take a look: https://jsfiddle.net/lhzav/urgahr5u/ So thats one randomizer but I need 3 all randomizing a different list. Make sense? Basically 3 lists 3 buttons 1 button to randomize each list, and I just don't know how to make it three lists.

 

<ul id="something">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<button id="shuffle" type="button">Shuffle List Items</button>

var list = document.getElementById("something"),
  button = document.getElementById("shuffle");

function shuffle(items) {
  var cached = items.slice(0),
    temp, i = cached.length,
    rand;
  while (--i) {
    rand = Math.floor(i * Math.random());
    temp = cached[rand];
    cached[rand] = cached[i];
    cached[i] = temp;
  }
  return cached;
}

function shuffleNodes() {
  var nodes = list.children,
    i = 0;
  nodes = Array.prototype.slice.call(nodes);
  nodes = shuffle(nodes);
  while (i < nodes.length) {
    list.appendChild(nodes[i]);
    ++i;
  }
}
button.onclick = shuffleNodes;

 

Edited September 28, 2016 by TheSlicingEdge
spelling

[Mr_KoKa]

Create class:

 

function Randomizer(listElement, buttonElement){
  this.listElement = listElement;
  this.buttonElement = buttonElement;
  this.list = ...
}
  
Randomizer.prototype.shuffle = function(items){
  var cached = this.items.slice(0);
  //...
}

Randomizer.prototype.shufleNodes = function(){
  //...
}

//Instantiate
var randomizer = new Randomizer(document.getElementById("something"), document.getElementById("shuffle"));

Just teach your class how to use it's own resources.

[TheSlicingEdge]

Just now, Mr_KoKa said:

Create class:

 

function Randomizer(listElement, buttonElement){
  this.listElement = listElement;
  this.buttonElement = buttonElement;
  this.list = ...
}
  
Randomizer.prototype.shuffle = function(items){
  var cached = this.items.slice(0);
  //...
}

Randomizer.prototype.shufleNodes = function(){
  //...
}

//Instantiate
var randomizer = new Randomizer(document.getElementById("something"), document.getElementById("shuffle"));

Just teach your class how to use it's own resources.

Can you explain how to implement this into my jsfiddle.

[minibois]

Do you want 1 button to randomize all, just three buttons to randomize one specific list or in what other way?

If you want a button for each list, you can add the randomize function to each button, but add something to the function and make the function in JS react to what you added.

What I mean is do something like this:

//html:
<button type="button" onClick="Randomize('List1')">-</button>
<button type="button" onClick="Randomize('List2')">-</button>
<button type="button" onClick="Randomize('List3')">-</button>

//JS:
function Randomize(ListName)
{
  if(ListName == List1)
  {
  //randomize list 1
  }
//etc.
}

 

[Mr_KoKa]

I made shuffle function not using prototype, so it can be call without instance of Randomizer as it behaves as C static function (doesn't access class members).

 

https://jsfiddle.net/urgahr5u/1/