Reputation: 127
Trying to randomly generate one div from an array on each load of a page.
I've managed to put together bits from a few random image generators to create the below.
When the [0] in the array contains an image, like the rest, everything works as it should. Once I replace [0]'s image with a div or video, nothing at all displays and the page is blank.
Any suggestions where I'm going wrong?
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript">
function random()
{
video = new Array(4);
video[0] = "<div class="clip"> </div> ";
video[1] = "<a href=''><img src='http://lorempixel.com/output/city-q-c-640-480-3.jpg' alt='' /></a>";
video[2] = "<a href=''><img src='http://lorempixel.com/output/fashion-q-c-640-480-6.jpg' alt='' />";
video[3] = "<a href=''><img src='http://lorempixel.com/output/technics-q-c-640-480-1.jpg' alt='' />";
for(var i = 0; i < video.length; i++)
{
index = Math.floor(Math.random() * video.length);
document.write(video[index]);
}
}
</script>
</head>
<body>
<script type="text/javascript">
random();
</script>
</body>
Upvotes: 2
Views: 115
Reputation: 14233
You need to escape your quotes. Try:
video[0] = "<div class=\"clip\"> </div>";
or use singles:
video[0] = "<div class='clip'> </div>";
Also, you are aware your div is empty, right? Unless your style does something to make it display something, it will appear blank.
Upvotes: 5