How to make back and next buttons for images and/o

Question

I'm trying to make back and next buttons for, in this case, an iframe. Here is my code:

<script>
    var array=["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
    var iframe = document.getElementById('frame');
    var previousRandom = "npvNPORFXpc"; // initial video
    document.getElementById('random').addEventListener('click', function () {
        do {
            var random = array[Math.floor(Math.random() * array.length)];
        } 
        while (previousRandom === random)
        var url="http://www.youtube.com/embed/"+random;
        previousRandom = random;
        iframe.src = url;
    });
</script>

With a bit of HTML:

<button id="random">Random</button><br>
<iframe id="frame" src="http://www.youtube.com/embed/npvNPORFXpc" width="640" height="360" frameborder="0" allowfullscreen></iframe>

So I want to create two buttons, one for going to the next video in the var array and a second for the previous video in the var array.

I just started with JS and couldn't find an example that I understood.
Should have started with the basics of JS instead of this project, but still would like to finish this!

http://jsfiddle.net/MPNU2/

Answer 1

HTML:

<button id="random">Random</button>
&nbsp;
&nbsp;
<button id="prevVideo">Prev</button>
<button id="nextVideo">Next</button><br>

<iframe id="frame" src="http://www.youtube.com/embed/npvNPORFXpc" width="640"      height="360" frameborder="0" allowfullscreen></iframe>

JS:

var array=["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
var iframe = document.getElementById('frame');
var previousRandom = "npvNPORFXpc"; // initial video
document.getElementById('random').addEventListener('click', function () {
do {
    var random = array[Math.floor(Math.random() * array.length)];
} while (previousRandom === random)
var url="http://www.youtube.com/embed/"+random;
previousRandom = random;
iframe.src = url;});

document.getElementById('prevVideo').addEventListener('click', function () {
    var curIndex = array.indexOf(previousRandom);
    curIndex--;
    if (curIndex < 0)
    {
        curIndex = array.length -1;
    }
    var video = array[curIndex];
    var url="http://www.youtube.com/embed/"+video;
    previousRandom = video;
    iframe.src = url;
});

document.getElementById('nextVideo').addEventListener('click', function () {
    var curIndex = array.indexOf(previousRandom);
    curIndex++;
    if (curIndex >= array.length)
    {
        curIndex = 0;
    }
    var video = array[curIndex];
    var url="http://www.youtube.com/embed/"+video;
    previousRandom = video;
    iframe.src = url;
});

Working example: http://jsfiddle.net/z47XP/

Answer 2

Example using the example that I pointed you at.

CSS

#utubeFrame {
    display:block;
    width:640px;
    height:360px;
}

HTML

<button id="random">Random</button>
<button id="previous">Previous</button>
<button id="next">Next</button>
<iframe id="utubeFrame"></iframe>

Javascript

function RingArray(object, position) {
    this.array = RingArray.compact(object);
    this.setPosition(position);
}

RingArray.toInt32 = function (number) {
    return number >> 0;
};

RingArray.toUint32 = function (number) {
    return number >>> 0;
};

RingArray.isOdd = function (number) {
    return number % 2 === 1;
};

RingArray.indexWrap = function (index, length) {
    index = RingArray.toInt32(index);
    length = RingArray.toUint32(length);
    if (index < 0 && RingArray.isOdd(length)) {
        index -= 1;
    }

    return RingArray.toUint32(index) % length;
};

RingArray.compact = (function (filter) {
    var compact;

    if (typeof filter === 'function') {
        compact = function (object) {
            return filter.call(object, function (element) {
                return element;
            });
        };
    } else {
        compact = function (object) {
            object = Object(object);
            var array = [],
                length = RingArray.toUint32(object.length),
                index;

            for (index = 0; index < length; index += 1) {
                if (index in object) {
                    array.push(object[index]);
                }
            }

            return array;
        };
    }

    return compact;
}(Array.prototype.filter));

RingArray.prototype = {
    setPosition: function (position) {
        this.position = RingArray.indexWrap(position, this.array.length);

        return this;
    },

    setToStart: function () {
        return this.setPosition(0);
    },

    setToEnd: function () {
        return this.setPosition(this.array.length - 1);
    },

    setRandom: function () {
        return this.setPosition(Math.floor(Math.random() * this.array.length));
    },

    increment: function (amount) {
        return this.setPosition(this.position + (RingArray.toInt32(amount) || 1));
    },

    previousElement: function () {
        return this.array[RingArray.indexWrap(this.position - 1, this.array.length)];
    },

    currentElement: function () {
        return this.array[this.position];
    },

    nextElement: function () {
        return this.array[RingArray.indexWrap(this.position + 1, this.array.length)];
    }
};

var utubeFrame = document.getElementById('utubeFrame'),
    utubeIds = ["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"],
    baseURL = 'http://www.youtube.com/embed/',
    utubeRing = new RingArray(utubeIds);

function update() {
    utubeFrame.src = baseURL + utubeRing.currentElement();
}

document.getElementById('random').addEventListener('click', function () {
    var currentElement = utubeRing.currentElement();

    do {
        utubeRing.setRandom();
    } while (utubeRing.currentElement() === currentElement);
    update();
});

document.getElementById("previous").addEventListener("click", function () {
    utubeRing.increment(-1);
    update();
}, false);

document.getElementById("next").addEventListener("click", function () {
    utubeRing.increment(1);
    update();
}, false);

update();

On jsFiddle