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](http://en.wikipedia.org/wiki/Fisher-Yates_shuffle). — Scott Sauyet, Jul 11 '12 at 03:05
Related: http://www.robweir.com/blog/2010/02/microsoft-random-browser-ballot.html — Guffa, Jul 11 '12 at 21:22

score 4 · Accepted Answer · answered Jul 11 '12 at 01:33

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 '12 at 01:33

Guffa

687,336
108
737
1,005

So the javascript would read as follows, correct? If so, it's still not working... Perhaps there's something on my page conflicting, or is there still more to it? – user1411876 Jul 11 '12 at 01:43
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 :/ – user1411876 Jul 11 '12 at 01:46
@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. – Guffa Jul 11 '12 at 01:56
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 Jul 11 '12 at 02:00
I just added in the css again and the console shows: Resource interpreted as Image but transferred with MIME type text/html: "http://www.example.com/image1.jpg". The same errors shows for image1 to image7 – user1411876 Jul 11 '12 at 02:03
@user1411876: It's not a chat, you can't expect a reply instantly... The syntax error would definitely keep the code from running. Try to add a semicolon to the end of the previous line. The errors about the MIME type means that the servers sends the image with the wrong MIME type, but if the images show up that won't keep the code from working. – Guffa Jul 11 '12 at 03:08
I added the semicolon to the line before, so it's " }).slice(0,4); ", but nothing shows up. – user1411876 Jul 11 '12 at 03:28
@user1411876: Do you still get the same error message? Comment out the line and see if it goes away. Use tests like `console.log(divs);` or `alert(divs.length)` to check that you get the expected result. Introduce more of the code that you commented out, until you find what's causing the error message. – Guffa Jul 11 '12 at 15:14
Hey Guffa, I've asked another forum and it's been figured out! I'll give you the checkmark and +1 because you've been so open to help ^^, thank you! – user1411876 Jul 11 '12 at 18:56
@user1411876: Thanks. So, what was the problem? – Guffa Jul 11 '12 at 21:22
I was missing a load function and a function to show the div I believe. You can see it here: http://www.webdeveloper.com/forum/showthread.php?t=262489 – user1411876 Jul 12 '12 at 00:54
@user1411876: Using the `load` or `ready` event won't make any difference in this case, and you already have the call to show the elements (although it also rearranges the elements), so that answer is the same as this. – Guffa Jul 12 '12 at 02:35

score 2 · Answer 2 · answered Jul 11 '12 at 01:31

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 '12 at 01:31

Conner

30,144
8
52
73

Showing random div with javascript

2 Answers2