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:

'&lt;video controls source src=&quot;FILE.mp4&quot; type=&quot;video/mp4&quot;&gt;&lt;/video&gt;',
'&lt;img src=&quot;FILE.png&quot;&gt;',
'&lt;audio controls source src=&quot;FILE.mp3&quot; type=&quot;audio/mpeg&quot;&gt;&lt;/audio&gt;',



const array = [
    '',
    '&lt;p&gt;Text\&lt;br&gt;Hello I am text&lt;/p&gt;',
    '&lt;video controls source src="FILE.mp4" type="video/mp4"&gt;&lt;/video&gt;',
    '&lt;img src="FILE.png"&gt;',
    '&lt;audio controls source src="FILE.mp3" type="audio/mpeg"&gt;&lt;/audio&gt;',

];
//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 + '&amp;nbsp;/&amp;nbsp;' + (arrayLength - 1);
}}
document.addEventListener('click', backForth);
backForth({target:{className: "buttonS"}});
&lt;body&gt;
    &lt;output&gt;&lt;/output&gt;
    &lt;div&gt;
        &lt;button class="buttonS"&gt;Back&lt;/button&gt;
        &lt;b&gt;&lt;span id="counter"&gt;&lt;/span&gt;&lt;/b&gt;
        &lt;button class="buttonS"&gt;Forth&lt;/button&gt;
    &lt;/div&gt;
&lt;/body&gt;
The overall approach looks fine. Some suggestions:
Delegated click logic The current backForth being used both as a click listener and on the initial load feels a bit clunky since you have to pass in {target:{className: &quot;buttonS&quot;}}. Consider making a separate function that you pass an index to increment (either 1 or -1), and call that inside backForth, and call it with (1) initially.
Don't move buttons User interfaces are slightly friendlier when buttons stay in the same place - when they don't move based on the content size. Consider either moving the buttons above the output, or giving the output a fixed (or high minimum) height.
For variable name is really weird - it's very close to for, which is a reserved word, and regardless doesn't really indicate what the variable contains very well. Consider naming it something like displayedMediaIndex.
Variable initializers - you use var, let, and const:

If you're going to write in ES6+ (which you are, and you should), always use const or let to declare variables. var has a few gotchas (such as an unintuitive function scope rather than block scope, and of automatically assigning itself to properties of the global object when on the top level.) See ESLint rule no-var.
When deciding between const and let, use const whenever possible, since it indicates that the variable won't be reassigned, which improves readability when a reader of the code can understand that at a glance.

Prefer strict equality over sloppy equality, since sloppy equality operators have some very strange type coercion rules that a reader of the code should not have to have memorized to be entirely confident of the logic your code is implementing.
This is how I'd do it:


const medias = [
    '',
    '&lt;p&gt;Text\&lt;br&gt;Hello I am text&lt;/p&gt;',
    '&lt;video controls source src="FILE.mp4" type="video/mp4"&gt;&lt;/video&gt;',
    '&lt;img src="FILE.png"&gt;',
    '&lt;audio controls source src="FILE.mp3" type="audio/mpeg"&gt;&lt;/audio&gt;',
];
const mediasLength = medias.length;
let displayedMediaIndex = -1;
const output = document.querySelector('output');
const paginator = document.querySelector('.paginator');
const changeMedia = (indexChange) =&gt; {
    displayedMediaIndex = (displayedMediaIndex + indexChange + mediasLength) % mediasLength;
    output.innerHTML = medias[displayedMediaIndex];
    paginator.textContent = displayedMediaIndex + ' / ' + (mediasLength - 1);
};
document.addEventListener('click', (event) =&gt; {
    if (event.target.className == 'buttonS') {
        changeMedia(event.target.textContent === "Back" ? -1 : 1);
    }
});
changeMedia(1);
&lt;div&gt;
    &lt;button class="buttonS"&gt;Back&lt;/button&gt;
    &lt;b&gt;&lt;span class="paginator"&gt;&lt;/span&gt;&lt;/b&gt;
    &lt;button class="buttonS"&gt;Forth&lt;/button&gt;
&lt;/div&gt;
&lt;output&gt;&lt;/output&gt;