Excuse the interruption (but as a matter of interest only perhaps) for modern browsers and depending on structure you could use flex to change the order without changing the actual html order.
I’m not sure if I adapted your code correctly or efficiently but this seems to work.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
}
li {
flex:1 0 100%;
padding:10px;
background:#f9f9f9;
border-bottom:1px solid #fff;
}
</style>
</head>
<body>
<ul id="numbers">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>
<script>
function knuthShuffle(arr) {
var rand, temp, i;
for (i = arr.length - 1; i > 0; i -= 1) {
rand = Math.floor((i + 1) * Math.random());//get random between zero and i (inclusive)
temp = arr[rand];//swap i and the zero-indexed number
arr[rand] = arr[i];
arr[i] = temp;
}
return arr;
}
var numbers = document.querySelector('#numbers');
var list = [];
for (var i = 0; i < numbers.children.length; i += 1) {
list.push([i]);
}
list = knuthShuffle(list);
for (var i = 0; i < numbers.children.length; i += 1) {
numbers.children[i].style.order = list[i];
}
</script>
</body>
</html>
Whether it is more efficient to use css to re-order is another question but I was just interested n the practicality.
What I mean is that the script has no preference about them being <li> tags. They can be any kind of tags at all
That will be just as slow. Remove the onload piece and the code will start running much faster.
But do I have to use “numbers” for it to work, meaning the script is looking for “numbers”?
[/quote]
No, you don’t have to use “numbers”. A more generic name of container can be used instead.
// var numbers = document.querySelector('#numbers');
var container = document.querySelector('#numbers');
...
// for (var i = 0; i < numbers.children.length; i += 1) {
for (var i = 0; i < container.children.length; i += 1) {
...
// for (var i = 0; i < numbers.children.length; i += 1) {
// numbers.children[i].style.order = list[i];
for (var i = 0; i < container.children.length; i += 1) {
container.children[i].style.order = list[i];
That way, you can change document.querySelector('#numbers') to any kind of selector that you like. So long as it retrieves an appropriate container for what you want to randomise, it will work well.
We can even put that code inside of a function called shuffleElements() and call that function with any container that we want to use.
function shuffleElements(container) {
...
}
shuffleElements(document.querySelector('#numbers'));
The code has been updated at https://jsfiddle.net/0azkL7s9/4/ and it’s only the last line that needs to be changed, depending on the container that you have for the shuffled elements.
So to be sure I understand containers, if I want something else to randomize on the page, let’s say some text, would I only have to do the following and then change the id=“text”?
var container = document.querySelector('#text);
shuffleElements(container);
setInterval(shuffleElements, 3000, container);
Yes, I missed that - numbers only works because it “just-so-happens” to have the same name as the id name in the HTML. It’s not good to rely on that.
It needs to be container instead.
function shuffleElements(container) {
var list = [];
for (var i = 0; i < container.children.length; i += 1) {
// list.push(numbers.children[i]);
list.push(container.children[i]);
}
...
}
Now if you wanted to just exchange a text line where it would alternate line 1, then line 2 replaces line 1, then back and forth with it timed - would that be a completely different JS and then using different id’s? I am guessing that would be separate in that you are alternating not randomizing.
One last question relating to JS. Does JS code need to changed out from time to time or does it become outdated? Because the code that you wrote works great in the original iPad. I also have 18 year old JS that still works today.
Good knowing that. One more thought … Can one script conflict with another script on the same page? And if so, is that common? And I suppose that if it conflicts, then 1 won’t work?
