A Simple Media Generator with Directional Control

My goal was to have a single page display bulk amounts of media without the need to load new pages. I also wanted it to be able to load fast, so the generator uses a JavaScript array to display one item at a time. The user can move through the array backwards and forwards with the use of two buttons.

Images, video and audio can be added as strings in the following ways:

  • '<video controls source src="FILE.mp4" type="video/mp4"></video>',
  • '<img src="FILE.png">',
  • '<audio controls source src="FILE.mp3" type="audio/mpeg"></audio>',
const array = (
    '',
    '<p>Text<br>Hello I am text</p>',
    '<video controls source src="https://codereview.stackexchange.com/FILE.mp4" type="video/mp4"></video>',
    '<img src="FILE.png">',
    '<audio controls source src="FILE.mp3" type="audio/mpeg"></audio>',

);
//variables
const arrayLength = array.length;
var For = -1;

function backForth(ev) {
    if(ev.target.className == "buttonS") {
        const output = document.querySelector('output');
        let increment = (ev.target.textContent == "Back" ? -1 : 1);
        For = (For + increment + arrayLength) % arrayLength;
        output.innerHTML = array(For);
        document.getElementById('counter').innerHTML = For + '&nbsp;/&nbsp;' + (arrayLength - 1);
}}
document.addEventListener('click', backForth);
backForth({target:{className: "buttonS"}});
<body>
    <output></output>
    <div>
        <button class="buttonS">Back</button>
        <b><span id="counter"></span></b>
        <button class="buttonS">Forth</button>
    </div>
</body>