Cycle through JS array onclick and write value to DOM

Question

So I've got this JavaScript array full of fifty YouTube video id's and a while loop that writes the first two videos to the DOM. This code is being printed using PHP in case you're wondering about the backslashes.

<script type="text/javascript">
var videoArr=["id1", "id2", etc.];
var i = 0;
while (i<2) {
document.write(\'<iframe width="400" height="225" src="http://www.youtube.com/embed/  \'+videoArr[i]+\'?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>\');
i++;
}
</script>

So basically I need a 'Previous' and 'Next' button that will cycle through this array and write the next or previous two videos to the DOM. What's the best way to do this?

Michael Berkowski · Accepted Answer · 2012-07-03 13:25:41Z

1

You have declared var i at global scope already, now you only need functions to increment or decrement i and append it to the DOM. Rather than document.write() when the DOM is already loaded, you ought to append them to the <body>.

// i is at global scope
var i = 0;
function previousVideo() {
   // Only if you're not already at the beginning of the array
   if (i > 0) {
     i--;
     // You tagged this jQuery, so here's the simpler jQuery solution
     appendVideo(i);
    }
}
function nextVideo() {
  // Only if you're not already at the end of the array
  if (i < videoArr.length - 1) {
     i++;
     appendVideo(i);
  }
}
// Appends a new iframe to the <body>
function appendVideo(i) {
   $("body").append('<iframe width="400" height="225" src="http://www.youtube.com/embed/' + videoArr[i] + '?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>');
}

Create some new buttons and bind the functions previousVideo() and nextVideo() to them.

Edit: I just noticed you want to append two videos each time. In that case, just call the previous & next functions twice per button click. If you read to the ends of the array, only one will be added.

$('#yourbutton').click(function() {
  // Get rid of the old ones
  $('body').remove('iframe');
  // And write two new ones.
  previousVideo();
  previousVideo();
});

edited Jul 3, 2012 at 13:25

answered Jul 3, 2012 at 12:59

Michael Berkowski

271k47 gold badges452 silver badges395 bronze badges

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

5 Comments

aadu Over a year ago

Hi, thanks. It's very important that I append 2 videos at a time. How do you call a function twice per click? Also with this code it seems a video will only appear when I click a button. The first two videos in the array need to be there from the beginning.

Michael Berkowski Over a year ago

@AzzyDude See the example click event I added.

aadu Over a year ago

Thanks, that works, but this method isn't really suitable. The first two videos need to appear when the DOM loads, and the previous and next buttons are meant to swap the current two videos with the next two in the array. Your code is simply adding two new videos beside the ones already there.

Michael Berkowski Over a year ago

@AzzyDude Your question said nothing about swapping, it said you needed to write the next two to the DOM. Remove the existing iframes with something like $('body').remove('iframe');

aadu Over a year ago

Why would I need a 'Previous' and 'Next' button if the original videos didn't disappear? All I'd need is one button that said "Show two more videos".

Collectives™ on Stack Overflow

Cycle through JS array onclick and write value to DOM

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related