How to display a JavaScript array in HTML

Question

I have a JavaScript application that applies filters to a live video.

I was wondering how I can display what the current filter is using inner.HTML after the user hits the filter button.

I want to display the current filter (sepia, grayscale etc) in here

<p id="filterName"></p>

Here is my code which changes the filter, I feel I have to put the line of code to display the filter at the end as part of the filter button function.

 // CSS filters 
    //this array will cycle through the filter effects
    var index = 0; //the array starts at 0
    var filters = ['grayscale', 'sepia', 'saturate', 'hue', 'invert', 'no-filter'];



    // this applies the filter to the video feed, takes the class of the video feed
    var changeFilter = function () {
        var el = document.getElementById('video');
        el.className = 'videoClass';

        //this will cycle through the filters, once it hits the final filter it will reset
        var effect = filters[index++ % filters.length]
        if (effect) {
            el.classList.add(effect);
            console.log(el.classList);
        }
    }

    //when the user presses the filter button it will apply the first filter in the array
    document.getElementById('filterButton').addEventListener('click', changeFilter);

Thank you for your time.

Answer 1

I guess it is simple as this, isn't it?

var changeFilter = function () {
    ...
    var effect = filters[index++ % filters.length]
    ...
    document.getElementById('filterName').innerHTML=effect;
}

Another suggestion: You'd better update the index variable before indexing the array:

index=index++ % filters.length;
var effect=filters[index];

You have correctly avoided the indexing value exceding the array's bounds, but you must also avoid the index variable exceed the maximum integer bound.

---

If you wanted to set some of the filters as the initial filter, I recommend you to do it through these steps:

1.Take out all of the changeFilter's logic (except incrementing index) to a new function to update the filter:

function updateFilter()
{
    var el = document.getElementById('video');
    el.className = 'videoClass';

    var effect = filters[index];
    if (effect) {
        el.classList.add(effect);
        console.log(el.classList);
    }
    document.getElementById('filterName').innerHTML=effect;
}

2.Replace the body of changeFilter to delegate to the new function:

var changeFilter = function () {
    index=++index  % filters.length;  // pre-increment is better
    updateFilter();
}

In this way, you have separated the action of updating the filter from the action of changing the filter, so you can reuse it better.

3.Initialize properly the index variable to the desired initial filter:

var index = 5;

4.At the end of the script, call updateFilter the first time. This will put the current filter (which initially is the 5th index).