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.

I have a second question, I added another filter called no-filter (it adds clear). How can I have that be displayed at the start. As of now it only displays after I cycle through the other filters. — NAFarr
– NAFarr, Commented Nov 8, 2015 at 20:18

Little Santi · Accepted Answer · 2015-11-09 00:14:21Z

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).

edited Nov 9, 2015 at 0:14

answered Nov 8, 2015 at 20:01

Little Santi

8,8532 gold badges22 silver badges50 bronze badges

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

9 Comments

NAFarr Over a year ago

where would I place it? I'm still learning JavaScript. Would I add it as part of my filter button?

Stranded Kid Over a year ago

Will it really work? Won't the JS engine convert it to string and then you'll just see "Object Array" as value...

Little Santi Over a year ago

At the end of changeFilter's body. I've updated my answer.

Little Santi Over a year ago

@StrandedKid Hum... Yes, it will work: effect was initialized from the content of one of the array's indexes. So, it contains a string.

Stranded Kid Over a year ago

@LittleSanti Ok my bad did not read the OP post carefully, I thouhg he wanted to display the whole array content.

|

Collectives™ on Stack Overflow

How to display a JavaScript array in HTML

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related