/    Sign up×
Community /Pin to ProfileBookmark

Randomize Divs

Copy linkTweet thisAlerts:
Mar 13.2008

I have the following code that displays the first 5 divs. I want to know how to incorporate some random functionality. I want to also randomly display 3 of the 5 divs

[CODE]
<script type=”text/javascript”>
function randomizeIt() {
var nShow = 5;

var divs = document.getElementsByTagName(“div”);

for (var i=0; i<divs.length; i++)
if ((divs[i].className.indexOf(“randomContent”) == 0) && ( i >= nShow)) divs[i].style.display = “none”;
}
</script>
[/CODE]

Then my HTMLy

[CODE]
<body onload=”randomizeIt()”>
<div class=”randomContent”>Random 1</div>
<div class=”randomContent”>Random 2</div>
<div class=”randomContent”>Random 3</div>
<div class=”randomContent”>Random 4</div>
<div class=”randomContent”>Random 5</div>
<div class=”randomContent”>Random 6</div>
</body>
[/CODE]

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMar 13.2008 — [code=php]
<html>
<head>
<title>Random DIVs</title>
<style type="text/css">
div.randomContent { display:none; }
</style>
<script type="text/javascript">
function randOrd(){ return (Math.round(Math.random())-0.5); }

function randomizeIt() {
var nShow = 6;
var tarr = new Array(nShow);
for (var i=0; i<tarr.length; i++) { tarr[i] = i; }
tarr.sort( randOrd ); // alert(tarr.join('n')); // for testing
for (var i=0; i<3; i++) {
var divlocn = 'rdiv'+tarr[i];

document.getElementById(divlocn).style.display = 'block';
}
}
</script>
</head>
<body onLoad="randomizeIt()">
<div id='rdiv0' class="randomContent">Random 1</div>
<div id='rdiv1' class="randomContent">Random 2</div>
<div id='rdiv2' class="randomContent">Random 3</div>
<div id='rdiv3' class="randomContent">Random 4</div>
<div id='rdiv4' class="randomContent">Random 5</div>
<div id='rdiv5' class="randomContent">Random 6</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@2001alapnauthorMar 13.2008 — Yes this works great! I do however want to generalize the script and dont want to create a static variable for the number of divs in an array (nShow). Instead I was wondering if I could cycle through all the div's and use that as the count instead. Any ideas?
Copy linkTweet thisAlerts:
@2001alapnauthorMar 13.2008 — What if I did this
[CODE]
function randOrd(){ return (Math.round(Math.random())-0.5); }

function randomizeIt() {
var nShow = document.getElementsByTagName("div");

var tarr = new Array(nShow.length);
for (var i=0; i<tarr.length; i++) { tarr[i] = i; }
tarr.sort( randOrd );
for (var i=0; i< dShow; i++) {
var divlocn = 'rdiv'+tarr[i];
document.getElementById(divlocn).style.display = 'block';
}
}
[/CODE]

I grabbing all the divs then storing them in the nShow array then when I define the array length I just use "nShow.length". Not sure if it validates
Copy linkTweet thisAlerts:
@JMRKERMar 13.2008 — What if I did this
[CODE]
function randOrd(){ return (Math.round(Math.random())-0.5); }

function randomizeIt() {
var nShow = document.getElementsByTagName("div");

var tarr = new Array(nShow.length);
for (var i=0; i<tarr.length; i++) { tarr[i] = i; }
tarr.sort( randOrd );
for (var i=0; i< dShow; i++) {
var divlocn = 'rdiv'+tarr[i];
document.getElementById(divlocn).style.display = 'block';
}
}
[/CODE]
[/QUOTE]
Where is the variable 'dShow' coming from in your code?

If I understand your desires correctly, you want to have a variable

number of <DIV>s to show instead of the 3 you originally asked for.


Is that correct?

If yes, then just randomize the 'dShow' value before you use it to display

the random number of <DIV> from the max of 6 (instead of the 3 originally).
×

Success!

Help @2001alapn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...