Showing random div with javascript

Question

So I want to show random divs, and I found this stackoverflow solution here: Showing random divs using Jquery

And the correct answer uses this code: http://jsfiddle.net/nick_craver/RJMhT/

So I want to do the above, but for the life of me, I don't know how.

I thought it would be as simple as

<html>
<head>
<script type="text/javascript">
var divs = $("div.Image").get().sort(function() {
   return Math.round(Math.random())-0.5; //random so we get the right +/- combo
  }).slice(0,4)
$(divs).appendTo(divs[0].parentNode).show();
</script>
<style type="text/css">
div.Image { 
  display: none;
}
</style>
</head>
<body>
  <div class="Image"><img src="/image1.jpg">1</div>
  <div class="Image"><img src="/image2.jpg">2</div>
  <div class="Image"><img src="/image3.jpg">3</div>
  <div class="Image"><img src="/image4.jpg">4</div>
  <div class="Image"><img src="/image5.jpg">5</div>
  <div class="Image"><img src="/image6.jpg">6</div>
  <div class="Image"><img src="/image7.jpg">7</div>
</body>
</html>

But apparently not, as nothing shows up on my screen. Can somebody help me? Should be really really easy for someone who knows the least bit about javascript I think.

Thank ya!

This is not a good random sort of the DIVS. If you run it a number of times, you will find that certain combinations come up far more often than chance would predict. A better random shuffle might be the Fisher-Yates Algorithm. — Scott Sauyet
– Scott Sauyet, Commented Jul 11, 2012 at 3:05
Related: robweir.com/blog/2010/02/microsoft-random-browser-ballot.html — Guffa
– Guffa, Commented Jul 11, 2012 at 21:22

Guffa · Accepted Answer · 2012-07-11 01:33:20Z

4

You are running the script before the HTML code for the body of the page has been parsed, so the elements doesn't exist yet.

Put your code in the ready event of the page:

$(document).ready(function(){
  // your Javascript code goes here
});

Also you are missing the include of the jQuery library, as Conner showed.

answered Jul 11, 2012 at 1:33

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

user1411876 Over a year ago

So the javascript would read as follows, correct? <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/…> <script type="text/javascript"> $(document).ready(function(){ var divs = $("div.Image").get().sort(function(){ return Math.round(Math.random())-0.5; //random so we get the right +/- combo }).slice(0,4) $(divs).appendTo(divs[0].parentNode).show(); }); </script> If so, it's still not working... Perhaps there's something on my page conflicting, or is there still more to it?

user1411876 Over a year ago

If that's hard to read, I basically added the jquery code and wrapped the code between $(document).ready(function(){ and }); Nothing shows up, and the source reveals my codes are there :/

Guffa Over a year ago

@user1411876: Yes, that should work. Comment out the CSS rule so that you see that the images show up at all. Then check the console in the browser for Javascript error messages.

user1411876 Over a year ago

So i removed the css, and the images do show. I checked the console and I got this: Uncaught SyntaxError: Unexpected token ILLEGAL on line 175, which is this line: $(divs).appendTo(divs[0].parentNode).show(); I'm guessing the "divs" should be "div"?

user1411876 Over a year ago

I just added in the css again and the console shows: Resource interpreted as Image but transferred with MIME type text/html: "example.com/image1.jpg". The same errors shows for image1 to image7

|

Conner · Accepted Answer · 2012-07-11 01:31:23Z

2

You need to import the jQuery library.

Add

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

to your <head> tags before your javascript code.

answered Jul 11, 2012 at 1:31

Conner

31.4k8 gold badges55 silver badges75 bronze badges

Collectives™ on Stack Overflow

Showing random div with javascript

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related